diff --git a/src/components/Drawer/DrawerContent.tsx b/src/components/Drawer/DrawerContent.tsx
index 010a1066..1c857f64 100644
--- a/src/components/Drawer/DrawerContent.tsx
+++ b/src/components/Drawer/DrawerContent.tsx
@@ -14,7 +14,7 @@ import {
 } from '../../constants/Constants';
 import SettingsDrawerContent from './SettingsDrawerContent';
 import HomeDrawerContent from './HomeDrawerContent';
-
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   navigation: DrawerNavigationProp<any, 'DrawerStack'>
@@ -41,14 +41,14 @@ const DrawerContent = ({ navigation }: Props) => {
       source={require('../../assets/main/menuBG.png')}
     >
       <TouchableOpacity
-        style={[styles.close, { [isRTL ? 'left' : 'right']: 20 }]}
+        style={[styles.close, { [LocalizedStyles.side(isRTL, true)]: 20 }]}
         hitSlop={HIT_SLOP}
         onPress={navigation.closeDrawer}
       >
         <Icon source={require('../../assets/main/menuClose.png')} width={12} height={18} />
       </TouchableOpacity>
 
-      <View style={{ flex: 1, flexDirection: isRTL ? 'row-reverse' : 'row' }}>
+      <View style={{ flex: 1, flexDirection: LocalizedStyles.flexDirection(isRTL) }}>
         {showSettings ?
           (<SettingsDrawerContent
             navigation={navigation}
@@ -63,7 +63,7 @@ const DrawerContent = ({ navigation }: Props) => {
 
       </View>
 
-      <View style={[styles.footerContainer, { alignSelf: isRTL ? 'flex-end' : 'flex-start' }]}>
+      <View style={[styles.footerContainer, { alignSelf: LocalizedStyles.alignSelf(isRTL) }]}>
         <Text style={styles.versionText}>{`${versionNumber} ${VERSION_NAME}`}</Text>
       </View>
     </ImageBackground>
diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
index 42fa41ee..4297ee33 100644
--- a/src/components/Drawer/DrawerItem.tsx
+++ b/src/components/Drawer/DrawerItem.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent, useMemo } from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
 import { Icon, Text, TouchableOpacity } from '../common';
 import { type } from 'os';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   isRTL: boolean
@@ -26,7 +27,7 @@ const DrawerItem: FunctionComponent<Props> = ({ isRTL, icon, iconSize= 18, label
 
 
   return (
-    <TouchableOpacity style={[styles.container, { flexDirection: isRTL ? 'row-reverse' : 'row' }, style]} onPress={onPress}>
+    <TouchableOpacity style={[styles.container, { flexDirection: LocalizedStyles.flexDirection(isRTL) }, style]} onPress={onPress}>
       <Icon source={icon} width={iconSize} />
       {LabelComponent}
     </TouchableOpacity>
diff --git a/src/components/Drawer/Home.tsx b/src/components/Drawer/Home.tsx
index 65722e5c..8d3b7ad5 100644
--- a/src/components/Drawer/Home.tsx
+++ b/src/components/Drawer/Home.tsx
@@ -21,6 +21,7 @@ import MapModal from '../Main/Modals/MapModal';
 import { INIT_ROUTE_NAME } from '../../constants/Constants';
 import BatteryModal from '../Main/Modals/BatteryModal';
 import BatterySettings from '../Main/Settings/BatterySettings';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 import { LocaleReducer, ExposuresReducer, Store } from '../../types';
 import BluetoothSettings from '../Main/Settings/BluetoothSettings';
@@ -87,7 +88,7 @@ const Home = () => {
         drawerType="back"
         screenOptions={{ gestureEnabled: false }}
         drawerContent={props => <DrawerContent {...props} />}
-        drawerPosition={isRTL ? 'right' : 'left'}
+        drawerPosition={LocalizedStyles.side(isRTL)}
         drawerStyle={{
           width: '100%'
         }}
diff --git a/src/components/Drawer/HomeDrawerContent.tsx b/src/components/Drawer/HomeDrawerContent.tsx
index 03593dc4..89d136cd 100644
--- a/src/components/Drawer/HomeDrawerContent.tsx
+++ b/src/components/Drawer/HomeDrawerContent.tsx
@@ -21,6 +21,7 @@ import {
 } from '../../constants/Constants';
 import { toggleWebview } from '../../actions/GeneralActions';
 import { USER_DISABLED_BATTERY } from '../../constants/ActionTypes';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   navigation: DrawerNavigationProp<any, 'DrawerStack'>
@@ -57,13 +58,13 @@ const HomeDrawerContent = ({ navigation, showSettings }: Props) => {
         style={{ alignItems: 'center', }}
         label={(
           <>
-            <Text style={{ paddingHorizontal: 19, fontSize: 18, textAlign: isRTL ? 'right' : 'left' }}>{settings.label}</Text>
+            <Text style={{ paddingHorizontal: 19, fontSize: 18, textAlign: LocalizedStyles.side(isRTL) }}>{settings.label}</Text>
             <View style={{ position: 'absolute', top: 0, bottom: 0, right: 19, justifyContent: 'center' }}>
 
               <Icon
                 width={13}
                 source={require('../../assets/main/menuBack.png')}
-                customStyles={{ transform: [{ rotateY: isRTL ? '180deg' : '0deg' }] }}
+                customStyles={{ transform: [{ rotateY: LocalizedStyles.rotateDegree(isRTL) }] }}
               />
             </View>
           </>
diff --git a/src/components/Drawer/SettingsDrawerContent.tsx b/src/components/Drawer/SettingsDrawerContent.tsx
index 96821827..28c44f18 100644
--- a/src/components/Drawer/SettingsDrawerContent.tsx
+++ b/src/components/Drawer/SettingsDrawerContent.tsx
@@ -21,6 +21,7 @@ import {
 } from '../../constants/Constants';
 import { toggleWebview } from '../../actions/GeneralActions';
 import { USER_DISABLED_BATTERY } from '../../constants/ActionTypes';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
     navigation: DrawerNavigationProp<any, 'DrawerStack'>
@@ -34,7 +35,7 @@ const SettingsDrawerContent = ({ navigation, goToMainDrawer }: Props) => {
   return (
     <View style={styles.container}>
       <TouchableOpacity
-        style={[styles.close, { [!isRTL ? 'left' : 'right']: 20, flexDirection: isRTL ? 'row-reverse' : 'row' }]}
+        style={[styles.close, { [LocalizedStyles.side(isRTL)]: 20, flexDirection: LocalizedStyles.flexDirection(isRTL) }]}
         hitSlop={HIT_SLOP}
         onPress={goToMainDrawer}
       >
@@ -44,11 +45,11 @@ const SettingsDrawerContent = ({ navigation, goToMainDrawer }: Props) => {
           customStyles={{
             borderLeftWidth: StyleSheet.hairlineWidth,
             borderColor: 'rgb(32, 49, 94)',
-            [!isRTL ? 'paddingRight' : 'paddingLeft']: 25,
-            transform: [{ rotateY: isRTL ? '0deg' : '180deg' }]
+            [LocalizedStyles.paddingSide(isRTL)]: 25,
+            transform: [{ rotateY: LocalizedStyles.rotateDegree(isRTL, true) }]
           }}
         />
-        <Text style={[{ color: 'rgb(32, 49, 94)', [isRTL ? 'marginRight' : 'marginLeft']: 7, }]} bold>{settings.label}</Text>
+        <Text style={[{ color: 'rgb(32, 49, 94)', [LocalizedStyles.marginSide(isRTL)]: 7, }]} bold>{settings.label}</Text>
       </TouchableOpacity>
 
 
@@ -63,11 +64,11 @@ const SettingsDrawerContent = ({ navigation, goToMainDrawer }: Props) => {
           style={{ alignItems: 'flex-start' }}
           label={(
             <View style={{ paddingHorizontal: 19, alignItems: 'stretch' }}>
-              <Text style={{ fontSize: 18, textAlign: isRTL ? 'right' : 'left' }}>{battery.label}</Text>
+              <Text style={{ fontSize: 18, textAlign: LocalizedStyles.side(isRTL) }}>{battery.label}</Text>
               <View style={{
-                flexDirection: isRTL ? 'row-reverse' : 'row',
+                flexDirection: LocalizedStyles.flexDirection(isRTL),
                 marginTop: IS_SMALL_SCREEN ? 5 : 8,
-                [isRTL ? 'marginRight' : 'marginRight']: IS_SMALL_SCREEN ? 65 : 85
+                [LocalizedStyles.marginSide(isRTL)]: IS_SMALL_SCREEN ? 65 : 85
               }}
               >
                 <View style={{
@@ -78,7 +79,7 @@ const SettingsDrawerContent = ({ navigation, goToMainDrawer }: Props) => {
                   marginTop: 5
                 }}
                 />
-                <Text style={{ fontSize: 14, textAlign: isRTL ? 'right' : 'left', marginHorizontal: 8 }}>{battery[batteryDisabled ? 'batteryOptimized' : 'batteryNotOptimized']}</Text>
+                <Text style={{ fontSize: 14, textAlign: LocalizedStyles.side(isRTL), marginHorizontal: 8 }}>{battery[batteryDisabled ? 'batteryOptimized' : 'batteryNotOptimized']}</Text>
               </View>
             </View>
                     )
@@ -92,11 +93,11 @@ const SettingsDrawerContent = ({ navigation, goToMainDrawer }: Props) => {
         style={{ alignItems: 'flex-start' }}
         label={(
           <View style={{ paddingHorizontal: 19, alignItems: 'stretch' }}>
-            <Text style={{ fontSize: 18, textAlign: isRTL ? 'right' : 'left' }}>{bluetooth.label}</Text>
+            <Text style={{ fontSize: 18, textAlign: LocalizedStyles.side(isRTL) }}>{bluetooth.label}</Text>
             <View style={{
-              flexDirection: isRTL ? 'row-reverse' : 'row',
+              flexDirection: LocalizedStyles.flexDirection(isRTL),
               marginTop: IS_SMALL_SCREEN ? 5 : 8,
-              [isRTL ? 'marginRight' : 'marginRight']: IS_SMALL_SCREEN ? 65 : 85
+              [isRTL ? 'marginRight' : 'marginRight']: IS_SMALL_SCREEN ? 65 : 85 // is this a bug marginRight for both directions
             }}
             >
               <View
@@ -108,7 +109,7 @@ const SettingsDrawerContent = ({ navigation, goToMainDrawer }: Props) => {
                   marginTop: 5
                 }}
               />
-              <Text style={{ fontSize: 14, textAlign: isRTL ? 'right' : 'left', marginHorizontal: 8 }}>{bluetooth[enableBle ? 'BLEOn' : 'BLEOff']}</Text>
+              <Text style={{ fontSize: 14, textAlign: LocalizedStyles.side(isRTL), marginHorizontal: 8 }}>{bluetooth[enableBle ? 'BLEOn' : 'BLEOff']}</Text>
             </View>
           </View>
                 )}
diff --git a/src/components/Main/ExposureInstructions.tsx b/src/components/Main/ExposureInstructions.tsx
index 2b139f21..27978efb 100644
--- a/src/components/Main/ExposureInstructions.tsx
+++ b/src/components/Main/ExposureInstructions.tsx
@@ -19,7 +19,7 @@ import {
 import { Icon, Text, TouchableOpacity } from '../common';
 import { Exposure, Store, LocaleReducer } from '../../types';
 import { moveAllToPastExposures } from '../../actions/ExposuresActions';
-
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 if (
   Platform.OS === 'android'
@@ -110,7 +110,7 @@ const ExposureInstructions = ({ navigation, route }: Props) => {
 
 
     return (
-      <Text style={{ fontSize: IS_SMALL_SCREEN ? 14 : 16, lineHeight: 17, marginVertical: IS_SMALL_SCREEN ? 5 : 10, letterSpacing: 0.2, textAlign: isRTL ? 'right' : 'left' }} key={exposure.properties.OBJECTID}>
+      <Text style={{ fontSize: IS_SMALL_SCREEN ? 14 : 16, lineHeight: 17, marginVertical: IS_SMALL_SCREEN ? 5 : 10, letterSpacing: 0.2, textAlign: LocalizedStyles.side(isRTL) }} key={exposure.properties.OBJECTID}>
         <Text bold>• </Text>
         {ListText}
 
@@ -119,7 +119,7 @@ const ExposureInstructions = ({ navigation, route }: Props) => {
   }), [exposures, locale]);
 
   const renderActionButton = (icon: number, text: string, buttonText: string, action: () => void) => (
-    <View style={[styles.actionButtonContainer, IS_SMALL_SCREEN ? styles.actionButtonContainerSmall : styles.actionButtonContainerBig, IS_SMALL_SCREEN && { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
+    <View style={[styles.actionButtonContainer, IS_SMALL_SCREEN ? styles.actionButtonContainerSmall : styles.actionButtonContainerBig, IS_SMALL_SCREEN && { flexDirection: LocalizedStyles.flexDirection(isRTL) }]}>
       <Icon source={icon} width={22} height={35} />
 
       <Text style={styles.actionText}>{text}</Text>
@@ -146,7 +146,7 @@ const ExposureInstructions = ({ navigation, route }: Props) => {
         {exposures.length > 4 && (
           <TouchableOpacity
             style={{
-              flexDirection: isRTL ? 'row' : 'row-reverse',
+              flexDirection: LocalizedStyles.flexDirection(isRTL, true),
               alignItems: 'center'
             }}
             onPress={() => {
@@ -182,8 +182,8 @@ const ExposureInstructions = ({ navigation, route }: Props) => {
             alignItems: 'center',
             position: 'absolute',
             top: PADDING_TOP(IS_SMALL_SCREEN ? 10 : 28),
-            flexDirection: isRTL ? 'row' : 'row-reverse',
-            [!isRTL ? 'right' : 'left']: IS_SMALL_SCREEN ? 10 : 25,
+            flexDirection: LocalizedStyles.flexDirection(isRTL, true),
+            [LocalizedStyles.side(isRTL, true)]: IS_SMALL_SCREEN ? 10 : 25,
           }}
           onPress={() => navigation.navigate('ExposureDetected')}
         >
@@ -191,7 +191,7 @@ const ExposureInstructions = ({ navigation, route }: Props) => {
             width={IS_SMALL_SCREEN ? 20 : 24}
             source={require('../../assets/main/back.png')}
             customStyles={{
-              transform: [{ rotate: !isRTL ? '0deg' : '180deg' }]
+              transform: [{ rotate: LocalizedStyles.rotateDegree(isRTL) }]
             }}
           />
           <Text
@@ -215,7 +215,7 @@ const ExposureInstructions = ({ navigation, route }: Props) => {
       </View>
       <View style={{ justifyContent: 'space-between' }}>
         <Text style={{ marginBottom: IS_SMALL_SCREEN ? 12 : 25 }} bold>{themInstructions}</Text>
-        <View style={!IS_SMALL_SCREEN && { width: SCREEN_WIDTH - (23 * 2), flexDirection: isRTL ? 'row-reverse' : 'row', flexWrap: 'wrap', justifyContent: 'space-between', }}>
+        <View style={!IS_SMALL_SCREEN && { width: SCREEN_WIDTH - (23 * 2), flexDirection: LocalizedStyles.flexDirection(isRTL), flexWrap: 'wrap', justifyContent: 'space-between', }}>
           {renderActionButton(require('../../assets/main/isolation.png'), goIntoIsolation, allInstructions, () => Linking.openURL(furtherInstructions))}
           {renderActionButton(require('../../assets/main/report.png'), reportIsolation, reportSite, () => Linking.openURL(reportForm))}
         </View>
diff --git a/src/components/Main/ExposureRelief.tsx b/src/components/Main/ExposureRelief.tsx
index 6a04aecf..36e5008d 100644
--- a/src/components/Main/ExposureRelief.tsx
+++ b/src/components/Main/ExposureRelief.tsx
@@ -6,6 +6,7 @@ import { Text, Icon, ActionButton, TouchableOpacity } from '../common';
 import { IS_SMALL_SCREEN, HIT_SLOP, PADDING_TOP, MAIN_COLOR } from '../../constants/Constants';
 import { Store, LocaleReducer } from '../../types';
 import { moveAllToPastExposures } from '../../actions/ExposuresActions';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   navigation: StackNavigationProp<any>
@@ -30,19 +31,19 @@ const ExposureRelief = ({ navigation }: Props) => {
       <TouchableOpacity
         hitSlop={HIT_SLOP}
         style={{
-          flexDirection: isRTL ? 'row' : 'row-reverse',
+          flexDirection: LocalizedStyles.flexDirection(isRTL, true),
           alignContent: 'center',
           alignItems: 'center',
           position: 'absolute',
           top: PADDING_TOP(28),
-          [!isRTL ? 'right' : 'left']: IS_SMALL_SCREEN ? 10 : 25,
+          [LocalizedStyles.side(isRTL, true)]: IS_SMALL_SCREEN ? 10 : 25,
         }}
         onPress={navigation.goBack}
       >
         <Icon
           width={IS_SMALL_SCREEN ? 20 : 24}
           source={require('../../assets/main/back.png')}
-          customStyles={{ transform: [{ rotate: !isRTL ? '0deg' : '180deg' }] }}
+          customStyles={{ transform: [{ rotate: LocalizedStyles.rotateDegree(isRTL) }] }}
         />
         <Text style={{ fontSize: IS_SMALL_SCREEN ? 13 : 15, color: MAIN_COLOR, marginHorizontal: IS_SMALL_SCREEN ? 5 : 8 }} bold>{editBtn}</Text>
       </TouchableOpacity>
diff --git a/src/components/Main/ExposuresDetected.tsx b/src/components/Main/ExposuresDetected.tsx
index 6f0dbf63..216eb7a5 100644
--- a/src/components/Main/ExposuresDetected.tsx
+++ b/src/components/Main/ExposuresDetected.tsx
@@ -22,6 +22,7 @@ import {
 import { showMapModal } from '../../actions/GeneralActions';
 import { dismissExposures, setExposureSelected } from '../../actions/ExposuresActions';
 import CardIdentifyTag from '../common/CardIdentifyTag';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface ExposuresDetectedProps {
   navigation: StackNavigationProp<any>
@@ -252,7 +253,7 @@ const ExposuresDetected = ({ navigation }: ExposuresDetectedProps) => {
             height: SCREEN_HEIGHT * 0.08,
             backgroundColor: MAIN_COLOR,
             justifyContent: 'center',
-            flexDirection: isRTL ? 'row-reverse' : 'row',
+            flexDirection: LocalizedStyles.flexDirection(isRTL),
             alignItems: 'center',
             paddingBottom: PADDING_BOTTOM()
           }}
diff --git a/src/components/Main/ExposuresHistory/ExposureHistoryListItem.tsx b/src/components/Main/ExposuresHistory/ExposureHistoryListItem.tsx
index 2a3e844b..fd383bbb 100644
--- a/src/components/Main/ExposuresHistory/ExposureHistoryListItem.tsx
+++ b/src/components/Main/ExposuresHistory/ExposureHistoryListItem.tsx
@@ -5,6 +5,7 @@ import { Icon, Text, TouchableOpacity } from '../../common';
 import { Strings } from '../../../locale/LocaleData';
 import { BASIC_SHADOW_STYLES, MAIN_COLOR, SCREEN_WIDTH } from '../../../constants/Constants';
 import CardIdentifyTag from '../../common/CardIdentifyTag';
+import * as LocalizedStyles from '../../../constants/LocalizedStyles';
 
 interface Props {
   isRTL: boolean,
@@ -28,7 +29,7 @@ const ExposureHistoryListItem: FunctionComponent<Props> = ({ children, style, is
     const exposureEndHour = time.add(1, 'hour').format('HH:mm');
 
     TimeText = (
-      <Text style={{ textAlign: isRTL ? 'right' : 'left' }}>
+      <Text style={{ textAlign: LocalizedStyles.side(isRTL) }}>
         <Text style={styles.text} bold>{`${exposureDate} `}</Text>
         <Text style={styles.text}>{`${betweenHours} `}</Text>
         <Text style={styles.text} bold>{`${exposureStartHour}-${exposureEndHour}`}</Text>
@@ -36,7 +37,7 @@ const ExposureHistoryListItem: FunctionComponent<Props> = ({ children, style, is
     );
   } else {
     TimeText = (
-      <Text style={{ textAlign: isRTL ? 'right' : 'left' }}>
+      <Text style={{ textAlign: LocalizedStyles.side(isRTL) }}>
         <Text style={styles.text} bold>{`${moment(fromTime).format('DD.MM.YY')} `}</Text>
         <Text style={styles.text}>{`${fromHour} `}</Text>
         <Text style={styles.text} bold>{`${moment(fromTime).format('HH:mm')}`}</Text>
@@ -49,25 +50,25 @@ const ExposureHistoryListItem: FunctionComponent<Props> = ({ children, style, is
     LocationUpdateTag = (
       <View
         style={{
-          flexDirection: isRTL ? 'row-reverse' : 'row',
+          flexDirection: LocalizedStyles.flexDirection(isRTL),
           paddingBottom: 10
         }}
       >
         <View
           style={{
             flex: 1,
-            flexDirection: isRTL ? 'row-reverse' : 'row',
+            flexDirection: LocalizedStyles.flexDirection(isRTL),
               
               
           }}
         >
           <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: 'rgb(44,191,220)', marginHorizontal: 6 }} />
-          <Text style={{ fontSize: 12, letterSpacing: -0.09, textAlign: isRTL ? 'right' : 'left' }}>{BLELocationUpdate}</Text>
+          <Text style={{ fontSize: 12, letterSpacing: -0.09, textAlign: LocalizedStyles.side(isRTL) }}>{BLELocationUpdate}</Text>
         </View>
         <View
           style={{
             flex: 1,
-            flexDirection: isRTL ? 'row-reverse' : 'row',
+            flexDirection: LocalizedStyles.flexDirection(isRTL),
             alignItems: 'flex-start',
             justifyContent: 'flex-end',
           }}
@@ -81,7 +82,7 @@ const ExposureHistoryListItem: FunctionComponent<Props> = ({ children, style, is
       <View
         style={{
           flex: 1,
-          flexDirection: isRTL ? 'row' : 'row-reverse',
+          flexDirection: LocalizedStyles.flexDirection(isRTL, true),
           alignContent: 'center',
           justifyContent: 'space-between',
           paddingBottom: 10
@@ -96,9 +97,9 @@ const ExposureHistoryListItem: FunctionComponent<Props> = ({ children, style, is
   if (Place) {
     ShowPlaceText = (
       <>
-        <Text style={[styles.text, { textAlign: isRTL ? 'right' : 'left' }]} bold>{Place}</Text>
+        <Text style={[styles.text, { textAlign: LocalizedStyles.side(isRTL) }]} bold>{Place}</Text>
         <TouchableOpacity onPress={showExposureOnMap}>
-          <View style={{ flexDirection: isRTL ? 'row-reverse' : 'row', alignItems: 'center' }}>
+          <View style={{ flexDirection: LocalizedStyles.flexDirection(isRTL), alignItems: 'center' }}>
             <Icon source={require('../../../assets/main/map.png')} width={12} height={10} />
             <Text style={styles.showOnMap} bold>{showOnMap}</Text>
           </View>
@@ -114,13 +115,13 @@ const ExposureHistoryListItem: FunctionComponent<Props> = ({ children, style, is
         style={{
           paddingBottom: 20,
           paddingHorizontal: 15,
-          flexDirection: isRTL ? 'row-reverse' : 'row',
+          flexDirection: LocalizedStyles.flexDirection(isRTL),
           justifyContent: 'center',
           alignItems: 'center',
         }}
       >
         <Icon source={require('../../../assets/main/exposuresSmall.png')} width={32} height={20} customStyles={{ marginHorizontal: 7.5 }} />
-        <View style={[styles.textContainer, { alignItems: isRTL ? 'flex-end' : 'flex-start' }]}>
+        <View style={[styles.textContainer, { alignItems: LocalizedStyles.alignItems(isRTL) }]}>
 
           {TimeText}
 
diff --git a/src/components/Main/ExposuresHistory/ExposuresHistory.tsx b/src/components/Main/ExposuresHistory/ExposuresHistory.tsx
index 933b9722..bc87dfd6 100644
--- a/src/components/Main/ExposuresHistory/ExposuresHistory.tsx
+++ b/src/components/Main/ExposuresHistory/ExposuresHistory.tsx
@@ -8,6 +8,7 @@ import { Exposure } from '../../../types';
 import { PADDING_TOP, SCREEN_WIDTH, IS_SMALL_SCREEN, MAIN_COLOR, HIT_SLOP, WHITE } from '../../../constants/Constants';
 import ExposureHistoryListItem from './ExposureHistoryListItem';
 import { showMapModal } from '../../../actions/GeneralActions';
+import * as LocalizedStyles from '../../../constants/LocalizedStyles';
 
 interface Props {
   navigation: StackNavigationProp<any>,
@@ -38,9 +39,9 @@ const ExposuresHistory = (
   // show button if list is not empty or all exposures are of type BLE and can't be edited 
   const showEditBtn = useMemo(() => wasThereList.length + wasNotThereList.length > 0 && !pastExposures.every((exposure: Exposure) => exposure.properties.BLETimestamp), [wasThereList, wasNotThereList]);
   const [tabsLayout, setTabsLayout] = useState({});
-  const [lineAnimLeft] = useState(new Animated.Value(isRTL ? SCREEN_WIDTH : 0));
+  const [lineAnimLeft] = useState(new Animated.Value(LocalizedStyles.leading(isRTL)));
   const [lineAnimWidth] = useState(new Animated.Value(0));
-  const [listTranslateAnim] = useState(new Animated.Value(isRTL ? SCREEN_WIDTH : 0));
+  const [listTranslateAnim] = useState(new Animated.Value(LocalizedStyles.leading(isRTL)));
   const [firstLoad, setFirstLoad] = useState(true);
 
   useEffect(() => {
@@ -73,8 +74,8 @@ const ExposuresHistory = (
         <TouchableOpacity
           hitSlop={HIT_SLOP}
           style={[styles.editButtonContainer, {
-            [!isRTL ? 'left' : 'right']: IS_SMALL_SCREEN ? 10 : 20,
-            flexDirection: isRTL ? 'row-reverse' : 'row'
+            [LocalizedStyles.side(isRTL)]: IS_SMALL_SCREEN ? 10 : 20,
+            flexDirection: LocalizedStyles.flexDirection(isRTL)
           }]}
           onPress={() => navigation.navigate('ExposuresHistoryEdit')}
         >
@@ -88,7 +89,7 @@ const ExposuresHistory = (
           <Text bold>{title}</Text>
           <Text style={{ fontSize: 14, color: '#6a6a6a', marginVertical: 8 }}>{subTitle}</Text>
         </View>
-        <View style={{ flexDirection: isRTL ? 'row' : 'row-reverse' }}>
+        <View style={{ flexDirection: LocalizedStyles.flexDirection(isRTL, true) }}>
           <TouchableOpacity
             hitSlop={{ top: 10 }}
             style={styles.tabTextContainer}
@@ -143,8 +144,8 @@ const ExposuresHistory = (
           }}
         />
       </View>
-      <View style={{ flex: 1, flexDirection: isRTL ? 'row' : 'row-reverse', backgroundColor: '#f7f8fa' }}>
-        <Animated.View style={{ transform: [{ translateX: Animated.multiply(listTranslateAnim, isRTL ? -1 : 1) }] }}>
+      <View style={{ flex: 1, flexDirection: LocalizedStyles.flexDirection(isRTL, true), backgroundColor: '#f7f8fa' }}>
+        <Animated.View style={{ transform: [{ translateX: Animated.multiply(listTranslateAnim, LocalizedStyles.translateAnim(isRTL)) }] }}>
           <FlatList
             bounces={false}
             contentContainerStyle={styles.listContainer}
@@ -164,7 +165,7 @@ const ExposuresHistory = (
           />
         </Animated.View>
 
-        <Animated.View style={{ transform: [{ translateX: Animated.multiply(listTranslateAnim, isRTL ? -1 : 1) }] }}>
+        <Animated.View style={{ transform: [{ translateX: Animated.multiply(listTranslateAnim, LocalizedStyles.translateAnim(isRTL)) }] }}>
           <FlatList
             bounces={false}
             data={wasThereList}
diff --git a/src/components/Main/ExposuresHistory/ExposuresHistoryEdit.tsx b/src/components/Main/ExposuresHistory/ExposuresHistoryEdit.tsx
index 034c9c42..16cfb59e 100644
--- a/src/components/Main/ExposuresHistory/ExposuresHistoryEdit.tsx
+++ b/src/components/Main/ExposuresHistory/ExposuresHistoryEdit.tsx
@@ -8,7 +8,7 @@ import ExposureHistoryListItem from './ExposureHistoryListItem';
 import { PADDING_TOP, SCREEN_HEIGHT, SCREEN_WIDTH, IS_SMALL_SCREEN, MAIN_COLOR, WHITE, PADDING_BOTTOM } from '../../../constants/Constants';
 import { showMapModal } from '../../../actions/GeneralActions';
 import { replacePastExposureSelected } from '../../../actions/ExposuresActions';
-
+import * as LocalizedStyles from '../../../constants/LocalizedStyles';
 
 const ExposuresHistoryEdit = ({ navigation }) => {
   const dispatch = useDispatch();
@@ -117,7 +117,7 @@ const ExposuresHistoryEdit = ({ navigation }) => {
                     paddingVertical: 10,
                     alignItems: 'center',
                     paddingHorizontal: 16,
-                    flexDirection: isRTL ? 'row-reverse' : 'row',
+                    flexDirection: LocalizedStyles.flexDirection(isRTL),
                     backgroundColor: 'rgb(242,250,253)',
                   }}
                 >
@@ -125,7 +125,7 @@ const ExposuresHistoryEdit = ({ navigation }) => {
                     width={16}
                     source={require('../../../assets/main/moreInfo.png')}
                     customStyles={{
-                      [isRTL ? 'marginLeft' : 'marginRight']: 8
+                      [LocalizedStyles.marginSide(isRTL, true)]: 8
                     }}
                   />
                   <Text
@@ -142,7 +142,7 @@ const ExposuresHistoryEdit = ({ navigation }) => {
           </View>
         )}
       />
-      <View style={[styles.buttonsContainer, { flexDirection: isRTL ? 'row' : 'row-reverse', }]}>
+      <View style={[styles.buttonsContainer, { flexDirection: LocalizedStyles.flexDirection(isRTL, true), }]}>
         <TouchableOpacity
           style={{ flex: 1, backgroundColor: MAIN_COLOR, justifyContent: 'center' }}
           onPress={finishEdit}
@@ -180,7 +180,7 @@ const RenderExposure = ({ index, item, isRTL, strings, showExposureOnMap, setSel
     >
       {!BLETimestamp && Place && (
         <View style={{
-          flexDirection: isRTL ? 'row' : 'row-reverse',
+          flexDirection: LocalizedStyles.flexDirection(isRTL, true),
           marginTop: 20,
 
         }}
diff --git a/src/components/Main/InfoBubble.tsx b/src/components/Main/InfoBubble.tsx
index 1b173977..7efbe584 100644
--- a/src/components/Main/InfoBubble.tsx
+++ b/src/components/Main/InfoBubble.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Icon, Text, TouchableOpacity } from '../common';
 import { SCREEN_WIDTH, MAIN_COLOR } from '../../constants/Constants';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   isRTL: boolean,
@@ -13,12 +14,12 @@ interface Props {
 const InfoBubble: FunctionComponent<Props> = ({ isRTL, info, moreInfo, onPress }) => {
   return (
     <TouchableOpacity onPress={onPress}>
-      <View style={[styles.container, { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
+      <View style={[styles.container, { flexDirection: LocalizedStyles.flexDirection(isRTL) }]}>
         <Icon source={require('../../assets/locationHistory/info.png')} width={18} />
-        <View style={[styles.textContainer, { alignItems: isRTL ? 'flex-end' : 'flex-start' }]}>
-          <Text style={[styles.text, { textAlign: isRTL ? 'right' : 'left' }]}>{info}</Text>
+        <View style={[styles.textContainer, { alignItems: LocalizedStyles.alignItems(isRTL) }]}>
+          <Text style={[styles.text, { textAlign: LocalizedStyles.side(isRTL) }]}>{info}</Text>
           <View style={{ borderBottomWidth: 1, borderBottomColor: MAIN_COLOR }}>
-            <Text style={[styles.text, { textAlign: isRTL ? 'right' : 'left' }]} bold>{moreInfo}</Text>
+            <Text style={[styles.text, { textAlign: LocalizedStyles.side(isRTL) }]} bold>{moreInfo}</Text>
           </View>
         </View>
       </View>
diff --git a/src/components/Main/NoExposures.tsx b/src/components/Main/NoExposures.tsx
index 524abd12..1f6b9637 100644
--- a/src/components/Main/NoExposures.tsx
+++ b/src/components/Main/NoExposures.tsx
@@ -9,7 +9,7 @@ import InfoModal from './Modals/InfoModal';
 import { FadeInView, Text, Icon, TouchableOpacity } from '../common';
 import { Strings, Languages, ExternalUrls } from '../../locale/LocaleData';
 import { IS_SMALL_SCREEN, HIT_SLOP, PADDING_BOTTOM, SCREEN_WIDTH, IS_IOS } from '../../constants/Constants';
-
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface NoExposuresProps {
   isRTL: boolean
@@ -86,16 +86,16 @@ const NoExposures: FunctionComponent<NoExposuresProps> = ({ exposureState, langu
     const furtherInstructions = externalUrls.furtherInstructions[relevantLocale];
 
     return (
-      <TouchableOpacity style={{ flexDirection: isRTL ? 'row' : 'row-reverse', alignContent: 'center', marginTop: IS_SMALL_SCREEN ? 15 : 20 }} onPress={() => Linking.openURL(furtherInstructions)}>
+      <TouchableOpacity style={{ flexDirection: LocalizedStyles.flexDirection(isRTL, true), alignContent: 'center', marginTop: IS_SMALL_SCREEN ? 15 : 20 }} onPress={() => Linking.openURL(furtherInstructions)}>
         <View style={{ alignContent: 'flex-end' }}>
-          <Text style={{ textAlign: isRTL ? 'right' : 'left', fontSize: IS_SMALL_SCREEN ? 14 : 16 }}>{instructionLinkUpper}</Text>
-          <Text bold style={{ textAlign: isRTL ? 'right' : 'left', fontSize: IS_SMALL_SCREEN ? 14 : 16 }}>{instructionLinkLower}</Text>
+          <Text style={{ textAlign: LocalizedStyles.side(isRTL), fontSize: IS_SMALL_SCREEN ? 14 : 16 }}>{instructionLinkUpper}</Text>
+          <Text bold style={{ textAlign: LocalizedStyles.side(isRTL), fontSize: IS_SMALL_SCREEN ? 14 : 16 }}>{instructionLinkLower}</Text>
         </View>
         <Icon
           width={15}
           height={IS_SMALL_SCREEN ? 25 : 30}
           source={require('../../assets/main/isolation.png')}
-          customStyles={isRTL ? { marginLeft: 10 } : { marginRight: 10 }}
+          customStyles={{[LocalizedStyles.marginSide(isRTL, true)]: 10}}
         />
       </TouchableOpacity>
     );
diff --git a/src/components/Main/ScanHomeHeader.tsx b/src/components/Main/ScanHomeHeader.tsx
index 53a36c38..21dc99f2 100644
--- a/src/components/Main/ScanHomeHeader.tsx
+++ b/src/components/Main/ScanHomeHeader.tsx
@@ -5,6 +5,7 @@ import { TouchableOpacity, Icon } from '../common';
 import { onError } from '../../services/ErrorService';
 import { ExternalUrls, Strings, Languages } from '../../locale/LocaleData';
 import { HIT_SLOP, PADDING_TOP, SCREEN_HEIGHT, SCREEN_WIDTH, SHOW_DOT_BY_BUILD_NUMBER, MENU_DOT_LAST_SEEN, VERSION_BUILD } from '../../constants/Constants';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface ScanHomeHeaderProps {
   isRTL: boolean,
@@ -51,7 +52,7 @@ const ScanHomeHeader: FunctionComponent<ScanHomeHeaderProps> = ({ isRTL, languag
       resizeMode="stretch"
       resizeMethod="resize"
     >
-      <View style={[styles.container, { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
+      <View style={[styles.container, { flexDirection: LocalizedStyles.flexDirection(isRTL) }]}>
         <TouchableOpacity
           hitSlop={HIT_SLOP}
           onPress={() => {
diff --git a/src/components/Main/Settings/BatterySettings.tsx b/src/components/Main/Settings/BatterySettings.tsx
index 4e09bd6c..9eed3d03 100644
--- a/src/components/Main/Settings/BatterySettings.tsx
+++ b/src/components/Main/Settings/BatterySettings.tsx
@@ -11,6 +11,7 @@ import { ActionButton, Icon, Text, TouchableOpacity, HeaderButton } from '../../
 import { USER_DISABLED_BATTERY } from '../../../constants/ActionTypes';
 import { IS_SMALL_SCREEN, MAIN_COLOR, SCREEN_WIDTH, USER_AGREED_TO_BATTERY, PADDING_TOP, PADDING_BOTTOM, BASIC_SHADOW_STYLES, WHITE, HIT_SLOP } from '../../../constants/Constants';
 import { LocaleReducer, Store, GeneralReducer } from '../../../types';
+import * as LocalizedStyles from '../../../constants/LocalizedStyles';
 
 interface Props {
     onEnd(): void
@@ -48,7 +49,7 @@ const BatteryPermission: FunctionComponent<Props> = ({ navigation }) => {
           paddingVertical: IS_SMALL_SCREEN ? 16 : 24,
           paddingHorizontal: IS_SMALL_SCREEN ? 8 : 16,
           borderRadius: 13,
-          flexDirection: isRTL ? 'row-reverse' : 'row',
+          flexDirection: LocalizedStyles.flexDirection(isRTL),
 
         }]}
       >
@@ -63,10 +64,10 @@ const BatteryPermission: FunctionComponent<Props> = ({ navigation }) => {
           }}
           style={{ paddingHorizontal: IS_SMALL_SCREEN ? 8 : 16, backgroundColor: WHITE }}
         >
-          <Text style={{ fontSize: 14, color: 'rgb(98,98,98)', textAlign: isRTL ? 'right' : 'left' }}>{batteryDisabled ? batteryOptimizationOn : batteryOptimizationOff }</Text>
-          <View style={{ flexDirection: isRTL ? 'row-reverse' : 'row', alignItems: 'center', marginTop: 8 }}>
+          <Text style={{ fontSize: 14, color: 'rgb(98,98,98)', textAlign: LocalizedStyles.side(isRTL) }}>{batteryDisabled ? batteryOptimizationOn : batteryOptimizationOff }</Text>
+          <View style={{ flexDirection: LocalizedStyles.flexDirection(isRTL), alignItems: 'center', marginTop: 8 }}>
             <Icon source={require('../../../assets/main/settingsCog.png')} width={9} />
-            <Text style={{ fontSize: 12, color: 'rgb(0,120,214)', textAlign: isRTL ? 'right' : 'left', marginHorizontal: 6 }} bold>{settingsBtn}</Text>
+            <Text style={{ fontSize: 12, color: 'rgb(0,120,214)', textAlign: LocalizedStyles.side(isRTL), marginHorizontal: 6 }} bold>{settingsBtn}</Text>
           </View>
         </TouchableWithoutFeedback>
       </View>
diff --git a/src/components/Main/Settings/BluetoothSettings.tsx b/src/components/Main/Settings/BluetoothSettings.tsx
index 46b25128..02528ff4 100644
--- a/src/components/Main/Settings/BluetoothSettings.tsx
+++ b/src/components/Main/Settings/BluetoothSettings.tsx
@@ -12,6 +12,7 @@ import { USER_DISABLED_BATTERY, ENABLE_BLE } from '../../../constants/ActionType
 import { IS_SMALL_SCREEN, MAIN_COLOR, SCREEN_WIDTH, USER_AGREED_TO_BATTERY, PADDING_TOP, PADDING_BOTTOM, BASIC_SHADOW_STYLES, WHITE, HIT_SLOP, USER_AGREE_TO_BLE } from '../../../constants/Constants';
 import { LocaleReducer, Store, GeneralReducer } from '../../../types';
 import { initBLETracing } from '../../../services/BLEService';
+import * as LocalizedStyles from '../../../constants/LocalizedStyles';
 
 interface Props {
 
@@ -49,17 +50,17 @@ const BluetoothSettings: FunctionComponent<Props> = ({ navigation }) => {
           paddingVertical: IS_SMALL_SCREEN ? 16 : 24,
           paddingHorizontal: IS_SMALL_SCREEN ? 8 : 16,
           borderRadius: 13,
-          flexDirection: isRTL ? 'row-reverse' : 'row',
+          flexDirection: LocalizedStyles.flexDirection(isRTL),
           justifyContent: 'space-between',
           alignItems: 'center'
         }]}
       >
 
-        <Text style={{ flex: 1, color: 'rgb(98,98,98)', textAlign: isRTL ? 'right' : 'left' }} bold>{enableBle ? BLEOn : BLEOff}</Text>
+        <Text style={{ flex: 1, color: 'rgb(98,98,98)', textAlign: LocalizedStyles.side(isRTL) }} bold>{enableBle ? BLEOn : BLEOff}</Text>
         <Switch 
           thumbColor={enableBle ? MAIN_COLOR : WHITE}
           trackColor={{ true: 'rgb(145,199,231)', false: 'rgb(190,190,190' }}
-          style={{ [isRTL ? 'marginRight' : 'marginLeft']: 10 }}
+          style={{ [LocalizedStyles.marginSide(isRTL)]: 10 }}
           value={Boolean(enableBle)} 
           onValueChange={async (payload: boolean) => {
             dispatch({ type: ENABLE_BLE, payload });
diff --git a/src/components/Onboarding/LocationIOS.tsx b/src/components/Onboarding/LocationIOS.tsx
index a217472b..1398b634 100644
--- a/src/components/Onboarding/LocationIOS.tsx
+++ b/src/components/Onboarding/LocationIOS.tsx
@@ -7,6 +7,7 @@ import { ActionButton, GeneralContainer, TouchableOpacity, Text, OnboardingHeade
 import { onError } from '../../services/ErrorService';
 import { Strings } from '../../locale/LocaleData';
 import { IS_SMALL_SCREEN, MAIN_COLOR, SCREEN_WIDTH, ENABLE_BLE } from '../../constants/Constants';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   navigation: StackNavigationProp<any>,
@@ -57,7 +58,7 @@ const LocationIOS = ({ navigation, strings: { locationIOS: { title, subTitle1, s
         <Icon source={require('../../assets/onboarding/locationTutorial.png')} width={SCREEN_WIDTH - 50} height={106} customStyles={{ marginVertical: 25 }} />
 
         <TouchableOpacity onPress={() => Linking.openURL('app-settings:')}>
-          <View style={{ flexDirection: isRTL ? 'row-reverse' : 'row', alignItems: 'center', paddingHorizontal: IS_SMALL_SCREEN ? 20 : 0 }}>
+          <View style={{ flexDirection: LocalizedStyles.flexDirection(isRTL), alignItems: 'center', paddingHorizontal: IS_SMALL_SCREEN ? 20 : 0 }}>
             <Icon source={require('../../assets/onboarding/settings.png')} width={17} customStyles={{ marginHorizontal: 7 }} />
             <Text style={{ color: MAIN_COLOR, textDecorationLine: 'underline' }} bold>{goToSettings}</Text>
           </View>
diff --git a/src/components/ShareLocations/ShareLocations.tsx b/src/components/ShareLocations/ShareLocations.tsx
index 73d80423..e1de1a44 100644
--- a/src/components/ShareLocations/ShareLocations.tsx
+++ b/src/components/ShareLocations/ShareLocations.tsx
@@ -9,6 +9,7 @@ import { shareUserLocations } from '../../actions/DeepLinkActions';
 import { Strings } from '../../locale/LocaleData';
 import { LocaleReducer, Store } from '../../types';
 import { IS_SMALL_SCREEN, PADDING_BOTTOM, PADDING_TOP, TEXT_COLOR, IS_IOS, ENABLE_BLE } from '../../constants/Constants';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   route: any,
@@ -128,12 +129,12 @@ const ShareLocations = ({ route, navigation }: Props) => {
   const AgreeToBleCheckbox = () => {
     if (!IS_IOS && ENABLE_BLE && state === 'beforeShare') {
       return (
-        <TouchableOpacity style={{ flexDirection: isRTL ? 'row-reverse' : 'row', marginBottom: 23, paddingHorizontal: 30, alignItems: 'center' }} onPress={() => onValueSelected(!agreeToBle)} accessibilityRole="checkbox" checked={agreeToBle}>
+        <TouchableOpacity style={{ flexDirection: LocalizedStyles.flexDirection(isRTL), marginBottom: 23, paddingHorizontal: 30, alignItems: 'center' }} onPress={() => onValueSelected(!agreeToBle)} accessibilityRole="checkbox" checked={agreeToBle}>
           <View style={styles.box}>
             {agreeToBle && <Icon source={require('../../assets/onboarding/checked.png')} height={8} width={12} customStyles={{ tintColor: TEXT_COLOR }} />}
           </View>
 
-          <Text style={[styles.text, { textAlign: isRTL ? 'right' : 'left' }]}>{addBleDataText}</Text>
+          <Text style={[styles.text, { textAlign: LocalizedStyles.side(isRTL) }]}>{addBleDataText}</Text>
 
         </TouchableOpacity>
       );
diff --git a/src/components/common/CardIdentifyTag.tsx b/src/components/common/CardIdentifyTag.tsx
index 2be00adc..02cddd20 100644
--- a/src/components/common/CardIdentifyTag.tsx
+++ b/src/components/common/CardIdentifyTag.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { View } from 'react-native';
 import { Text } from '.';
+import * as LocalizedStyles from '../../constants/LocalizedStyles'
 
 interface Props {
     isRTL: boolean, 
@@ -16,10 +17,10 @@ const CardIdentifyTag: FunctionComponent<Props> = ({ isRTL, text, color, float =
       paddingHorizontal: 11,
       paddingVertical: 5
     }, {
-      [isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 13,
+      [LocalizedStyles.borderBottomSideRadius(isRTL)]: 13,
     }, float && {
       position: 'absolute',
-      [isRTL ? 'left' : 'right']: 0,
+      [LocalizedStyles.side(isRTL, true)]: 0,
     }]}
   >
     <Text style={{ fontSize: 10 }}>{text}</Text>
diff --git a/src/components/common/HeaderButton.tsx b/src/components/common/HeaderButton.tsx
index 06e5d91a..51f77479 100644
--- a/src/components/common/HeaderButton.tsx
+++ b/src/components/common/HeaderButton.tsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { TouchableOpacity, Icon } from '.';
 import { LocaleReducer, Store } from '../../types';
 import { IS_SMALL_SCREEN, PADDING_TOP, HIT_SLOP } from '../../constants/Constants';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   type?: 'close'|'back',
@@ -18,8 +19,8 @@ const HeaderButton = ({ type = 'back', onPress }: Props) => {
       hitSlop={HIT_SLOP}
       style={[styles.close, {
         top: PADDING_TOP(IS_SMALL_SCREEN ? 10 : 20),
-        [!isRTL ? 'right' : 'left']: IS_SMALL_SCREEN ? 10 : 20,
-        transform: [{ rotate: !isRTL ? '0deg' : '180deg' }]
+        [LocalizedStyles.side(isRTL, true)]: IS_SMALL_SCREEN ? 10 : 20,
+        transform: [{ rotate: LocalizedStyles.rotateDegree(isRTL) }]
       }]}
       onPress={onPress}
       importantForAccessibility="no-hide-descendants"
diff --git a/src/components/common/TermsOfUse.tsx b/src/components/common/TermsOfUse.tsx
index 9ae24d93..f35b133e 100644
--- a/src/components/common/TermsOfUse.tsx
+++ b/src/components/common/TermsOfUse.tsx
@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import { Icon, TouchableOpacity, Text } from '.';
 import { Strings } from '../../locale/LocaleData';
 import { SCREEN_WIDTH, TEXT_COLOR, USAGE_ON_BOARDING } from '../../constants/Constants';
+import * as LocalizedStyles from '../../constants/LocalizedStyles';
 
 interface Props {
   isRTL: boolean,
@@ -14,7 +15,7 @@ interface Props {
 
 const TermsOfUse = ({ isRTL, strings: { general: { readTOU, approveTOU }, location: { consent1, consent2 } }, value, onValueSelected, toggleWebview }: Props) => {
   return (
-    <View style={[styles.container, { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
+    <View style={[styles.container, { flexDirection: LocalizedStyles.flexDirection(isRTL) }]}>
       <TouchableOpacity onPress={() => onValueSelected(!value)} accessibilityLabel={approveTOU} accessibilityRole="checkbox" checked={value}>
         <View style={styles.box}>
           {value && <Icon source={require('../../assets/onboarding/checked.png')} height={8} width={12} customStyles={{ tintColor: TEXT_COLOR }} />}
@@ -22,7 +23,7 @@ const TermsOfUse = ({ isRTL, strings: { general: { readTOU, approveTOU }, locati
       </TouchableOpacity>
 
       <TouchableOpacity onPress={() => toggleWebview(true, USAGE_ON_BOARDING)} accessibilityHint={readTOU}>
-        <Text style={{ paddingHorizontal: 10, textAlign: isRTL ? 'right' : 'left' }}>
+        <Text style={{ paddingHorizontal: 10, textAlign: LocalizedStyles.side(isRTL) }}>
           <Text style={[styles.text]}>{consent1}</Text>
           <Text style={[styles.text, { textDecorationLine: 'underline' }]}>{consent2}</Text>
         </Text>
diff --git a/src/constants/LocalizedStyles.ts b/src/constants/LocalizedStyles.ts
new file mode 100644
index 00000000..d24d7c87
--- /dev/null
+++ b/src/constants/LocalizedStyles.ts
@@ -0,0 +1,41 @@
+import {SCREEN_WIDTH} from '../constants/Constants';
+
+export const marginSide = (isRTL: boolean, reverse?: boolean) => {
+  return isRTL && !reverse ? 'marginRight' : 'marginLeft';
+};
+
+export const side = (isRTL: boolean, reverse?: boolean) => {
+  return isRTL && !reverse ? 'right' : 'left';
+};
+
+export const flexDirection = (isRTL: boolean, reverse?: boolean) => {
+  return isRTL && !reverse ? 'row-reverse' : 'row';
+};
+
+export const borderBottomSideRadius = (isRTL: boolean) => {
+  return isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
+};
+
+export const rotateDegree = (isRTL: boolean, reverse?: boolean) => {
+  return isRTL && !reverse ? '180deg' : '0deg';
+};
+
+export const alignSelf = (isRTL: boolean) => {
+  return isRTL ? 'flex-end' : 'flex-start';
+};
+
+export const alignItems = (isRTL: boolean) => {
+  return isRTL ? 'flex-end' : 'flex-start';
+};
+
+export const paddingSide = (isRTL: boolean) => {
+  return isRTL ? 'paddingLeft' : 'paddingRight';
+};
+
+export const leading = (isRTL: boolean) => {
+  return isRTL ? SCREEN_WIDTH : 0;
+};
+
+export const translateAnim = (isRTL: boolean) => {
+  return isRTL ? -1 : 1;
+};