Support native RTL instead of isRTL conditional

android/app/src/main/java/com/hamagen/MainApplication.java

@@ -74,7 +74,6 @@ public void onCreate() {
 
         // FORCE LTR
         I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
-        sharedI18nUtilInstance.allowRTL(getApplicationContext(), false);
         SoLoader.init(this, /* native exopackage */ false);
         initializeFlipper(this); // Remove this line if you don't want Flipper enabled
     }

ios/codeAgainstCorona/AppDelegate.m

@@ -33,10 +33,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
-
-  [[RCTI18nUtil sharedInstance] allowRTL:NO];
-  [[RCTI18nUtil sharedInstance] forceRTL:NO];
-
+
   [FIRApp configure];
   [RNFirebaseNotifications configure];
 

src/components/Loading.tsx

@@ -160,7 +160,7 @@ const Loading = (
 
   return (
     (_.isEmpty(strings) || !initialRoute) ? null : (
-      <View style={styles.container}>
+      <View style={[styles.container, { direction: isRTL ? 'rtl' : 'ltr' }]}>
         <Stack.Navigator mode="modal" headerMode="none" initialRouteName={initialRoute}>
           <Stack.Screen name="Welcome" component={Welcome} />
           <Stack.Screen name="Location" component={Location} options={{ cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid }} />
@@ -175,7 +175,7 @@ const Loading = (
         <ChangeLanguage isVisible={showChangeLanguage} />
         <GeneralWebview isVisible={showWebview} locale={locale} closeWebview={() => toggleWebview(false, '')} usageType={usageType} />
         <ForceUpdate isVisible={showForceUpdate} strings={strings} />
-        <ForceTerms isVisible={showForceTerms} isRTL={isRTL} strings={strings} onSeeTerms={onSeeTerms} onApprovedTerms={onApprovedTerms} />
+        <ForceTerms isVisible={showForceTerms} strings={strings} onSeeTerms={onSeeTerms} onApprovedTerms={onApprovedTerms} />
       </View>
     )
   );

src/components/Main/ExposureInstructions.tsx

@@ -7,7 +7,6 @@ import config from '../../config/config';
 import { BASIC_SHADOW_STYLES, IS_SMALL_SCREEN, MAIN_COLOR, SCREEN_WIDTH } from '../../constants/Constants';
 
 interface Props {
-  isRTL: boolean,
   strings: any,
   locale: 'he'|'en'|'ar'|'am'|'ru',
   exposure: Exposure,
@@ -16,7 +15,6 @@ interface Props {
 
 const ExposureInstructions = (
   {
-    isRTL,
     locale,
     strings: {
       scanHome: { inDate, fromHour, toHour },
@@ -65,7 +63,7 @@ const ExposureInstructions = (
         <View style={{ alignItems: 'center', paddingHorizontal: 25 }}>
           <Text style={{ marginBottom: 25 }} bold>{keepSafe}</Text>
 
-          <View style={[styles.actionButtonsWrapper, { flexDirection: isRTL ? 'row-reverse' : 'row' }, IS_SMALL_SCREEN && { marginBottom: 100 }]}>
+          <View style={[styles.actionButtonsWrapper, { flexDirection: 'row' }, IS_SMALL_SCREEN && { marginBottom: 100 }]}>
             {renderActionButton(require('../../assets/main/isolation.png'), goIntoIsolation, allInstructions, () => Linking.openURL(furtherInstructions))}
             {renderActionButton(require('../../assets/main/report.png'), reportIsolation, reportSite, () => Linking.openURL(reportForm))}
           </View>

src/components/Main/ExposuresDetected.tsx

@@ -12,7 +12,6 @@ import {
 } from '../../constants/Constants';
 
 interface Props {
-  isRTL: boolean,
   strings: any,
   exposures: Exposure[],
   onValidExposure(exposure: Exposure): void,
@@ -21,7 +20,6 @@ interface Props {
 
 const ExposuresDetected = (
   {
-    isRTL,
     strings: { scanHome: { found, exposureEvents, reportedAt, inDate, fromHour, toHour, wereYouThere, no, canContinue, yes, needDirections } },
     exposures,
     onValidExposure,
@@ -84,7 +82,7 @@ const ExposuresDetected = (
       <View style={{ alignItems: 'center' }}>
         <Text style={!IS_SMALL_SCREEN && { marginBottom: 25 }}>{wereYouThere}</Text>
 
-        <View style={[styles.actionButtonsWrapper, { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
+        <View style={[styles.actionButtonsWrapper, { flexDirection: 'row' }]}>
           {renderActionButton(no, canContinue, onDismissExposure)}
           {renderActionButton(yes, needDirections, () => onValidExposure(exposures[0]))}
         </View>

src/components/Main/ExposuresHistory/ExposuresHistory.tsx

@@ -8,7 +8,6 @@ import { PADDING_TOP, SCREEN_HEIGHT, SCREEN_WIDTH } from '../../../constants/Con
 
 interface Props {
   navigation: any,
-  isRTL: boolean,
   strings: any,
   pastExposures: Exposure[]
 }
@@ -20,8 +19,7 @@ const ExposuresHistory = (
       scanHome: { inDate, fromHour, toHour },
       exposuresHistory: { title, noExposures }
     },
-    isRTL,
-    pastExposures
+    pastExposures,
   }: Props
 ) => {
   const renderEmptyState = () => (
@@ -39,9 +37,9 @@ const ExposuresHistory = (
 
         return (
           <View style={styles.listItemContainer}>
-            <View style={[styles.listItemSubContainer, { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
+            <View style={[styles.listItemSubContainer, { flexDirection: 'row' }]}>
               <Icon source={require('../../../assets/main/exposuresSmall.png')} width={21} height={13} customStyles={{ marginHorizontal: 7.5 }} />
-              <View style={{ alignItems: isRTL ? 'flex-end' : 'flex-start', marginHorizontal: 7.5 }}>
+              <View style={{ alignItems: 'flex-start', marginHorizontal: 7.5 }}>
                 <Text style={styles.text}>{Place}</Text>
                 <Text>
                   <Text style={styles.text}>{`${inDate} `}</Text>
@@ -123,11 +121,11 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state: any) => {
   const {
-    locale: { isRTL, strings },
+    locale: { strings },
     exposures: { pastExposures }
   } = state;
 
-  return { isRTL, strings, pastExposures };
+  return { strings, pastExposures };
 };
 
 export default connect(mapStateToProps, null)(ExposuresHistory);

src/components/Main/ScanHome.tsx

@@ -20,7 +20,6 @@ import { Exposure } from '../../types';
 
 interface Props {
   navigation: any,
-  isRTL: boolean,
   strings: any,
   locale: 'he'|'en'|'ar'|'am'|'ru',
   exposures: Exposure[],
@@ -33,7 +32,7 @@ interface Props {
   checkForceUpdate(): void
 }
 
-const ScanHome = ({ navigation, isRTL, strings, locale, exposures, validExposure, setValidExposure, removeValidExposure, dismissExposure, toggleWebview, firstPoint, checkForceUpdate }: Props) => {
+const ScanHome = ({ navigation, strings, locale, exposures, validExposure, setValidExposure, removeValidExposure, dismissExposure, toggleWebview, firstPoint, checkForceUpdate }: Props) => {
   const appStateStatus = useRef<AppStateStatus>('active');
   const [{ hasLocation, hasNetwork, hasGPS }, setIsConnected] = useState({ hasLocation: true, hasNetwork: true, hasGPS: true });
 
@@ -99,7 +98,7 @@ const ScanHome = ({ navigation, isRTL, strings, locale, exposures, validExposure
   const renderRelevantState = () => {
     if (validExposure) {
       return (
-        <ExposureInstructions isRTL={isRTL} strings={strings} locale={locale} exposure={validExposure} removeValidExposure={removeValidExposure} />
+        <ExposureInstructions strings={strings} locale={locale} exposure={validExposure} removeValidExposure={removeValidExposure} />
       );
     } if (!hasLocation || !hasNetwork) {
       return (
@@ -108,7 +107,6 @@ const ScanHome = ({ navigation, isRTL, strings, locale, exposures, validExposure
     } if (exposures.length > 0) {
       return (
         <ExposuresDetected
-          isRTL={isRTL}
           strings={strings}
           exposures={exposures}
           onValidExposure={exposure => setValidExposure(exposure)}
@@ -123,7 +121,6 @@ const ScanHome = ({ navigation, isRTL, strings, locale, exposures, validExposure
   return (
     <View style={styles.container}>
       <ScanHomeHeader
-        isRTL={isRTL}
         strings={strings}
         isConnected={hasLocation && hasNetwork && hasGPS}
         showChangeLanguage
@@ -146,11 +143,11 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state: any) => {
   const {
-    locale: { isRTL, strings, locale },
+    locale: { strings, locale },
     exposures: { exposures, validExposure, firstPoint }
   } = state;
 
-  return { isRTL, strings, locale, exposures, validExposure, firstPoint };
+  return { strings, locale, exposures, validExposure, firstPoint };
 };
 
 

src/components/Main/ScanHomeHeader.tsx

@@ -11,14 +11,13 @@ import {
 } from '../../constants/Constants';
 
 interface Props {
-  isRTL: boolean,
   strings: any,
   isConnected: boolean,
   showChangeLanguage: boolean,
   goToExposureHistory(): void
 }
 
-const ScanHomeHeader = ({ isRTL, strings: { scanHome: { noData, hasData, exposureHistory } }, isConnected, showChangeLanguage, goToExposureHistory }: Props) => {
+const ScanHomeHeader = ({ strings: { scanHome: { noData, hasData, exposureHistory } }, isConnected, showChangeLanguage, goToExposureHistory }: Props) => {
   return (
     <ImageBackground
       source={require('../../assets/main/headerBG.png')}
@@ -28,7 +27,7 @@ const ScanHomeHeader = ({ isRTL, strings: { scanHome: { noData, hasData, exposur
     >
       {
         showChangeLanguage && (
-          <View style={{ position: 'absolute', left: 20, top: PADDING_TOP(IS_SMALL_SCREEN ? 15 : 20) }}>
+          <View style={{ position: 'absolute', end: 20, top: PADDING_TOP(IS_SMALL_SCREEN ? 15 : 20) }}>
             <ChangeLanguageButton />
           </View>
         )
@@ -39,17 +38,17 @@ const ScanHomeHeader = ({ isRTL, strings: { scanHome: { noData, hasData, exposur
       </View>
 
       <View style={styles.subContainer}>
+        <View style={styles.headerItemContainer}>
+          <View style={[styles.indicator, { backgroundColor: isConnected ? MAIN_COLOR : '#b4b4b4' }]} />
+          <Text style={styles.text}>{isConnected ? hasData : noData}</Text>
+        </View>
+
         <TouchableOpacity onPress={goToExposureHistory}>
-          <View style={[styles.headerItemContainer, { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
+          <View style={styles.headerItemContainer}>
             <Icon source={require('../../assets/main/history.png')} width={12} height={9} />
             <Text style={styles.text}>{exposureHistory}</Text>
           </View>
         </TouchableOpacity>
-
-        <View style={[styles.headerItemContainer, { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
-          <View style={[styles.indicator, { backgroundColor: isConnected ? MAIN_COLOR : '#b4b4b4' }]} />
-          <Text style={styles.text}>{isConnected ? hasData : noData}</Text>
-        </View>
       </View>
     </ImageBackground>
   );
@@ -75,7 +74,8 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff'
   },
   headerItemContainer: {
-    alignItems: 'center'
+    alignItems: 'center',
+    flexDirection: 'row'
   },
   indicator: {
     ...BASIC_SHADOW_STYLES,

src/components/Onboarding/Location.tsx

@@ -11,12 +11,11 @@ import { IS_IOS, IS_SMALL_SCREEN, MAIN_COLOR, USAGE_ON_BOARDING } from '../../co
 
 interface Props {
   navigation: any,
-  isRTL: boolean,
   strings: any,
   toggleWebview(isShow: boolean, usageType: string): void
 }
 
-const Location = ({ navigation, isRTL, strings, toggleWebview }: Props) => {
+const Location = ({ navigation, strings, toggleWebview }: Props) => {
   const { location: { title, subTitle1, subTitle2IOS, subTitle2Android, approveLocation } } = strings;
 
   const animRef = useRef<any>(null);
@@ -59,7 +58,6 @@ const Location = ({ navigation, isRTL, strings, toggleWebview }: Props) => {
       <View style={{ alignItems: 'center' }}>
         <Animatable.View ref={animRef} style={{ marginBottom: 25, marginTop: IS_SMALL_SCREEN ? 5 : 0 }}>
           <TermsOfUse
-            isRTL={isRTL}
             strings={strings}
             value={isTOUAccepted}
             onValueSelected={value => setIsTOUAccepted(value)}
@@ -102,10 +100,10 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state: any) => {
   const {
-    locale: { isRTL, strings }
+    locale: { strings }
   } = state;
 
-  return { isRTL, strings };
+  return { strings };
 };
 
 const mapDispatchToProps = (dispatch: any) => {

src/components/Onboarding/LocationIOS.tsx

@@ -9,10 +9,9 @@ import { IS_SMALL_SCREEN, MAIN_COLOR, SCREEN_WIDTH } from '../../constants/Const
 interface Props {
   navigation: any,
   strings: any,
-  isRTL: boolean
 }
 
-const LocationIOS = ({ navigation, strings: { locationIOS: { title, subTitle1, subTitle2, goToSettings, set } }, isRTL }: Props) => {
+const LocationIOS = ({ navigation, strings: { locationIOS: { title, subTitle1, subTitle2, goToSettings, set } } }: Props) => {
   const appStateStatus = useRef<AppStateStatus>('active');
   const [isLocationAllowed, setIsLocationAllowed] = useState(false);
 
@@ -55,7 +54,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: 'row', 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>
@@ -100,10 +99,10 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state: any) => {
   const {
-    locale: { strings, isRTL }
+    locale: { strings }
   } = state;
 
-  return { strings, isRTL };
+  return { strings };
 };
 
 export default connect(mapStateToProps, null)(LocationIOS);

src/components/common/ForceTerms.tsx

@@ -5,14 +5,13 @@ import { ActionButton, Icon, TermsOfUse, Text } from '.';
 import { IS_SMALL_SCREEN, PADDING_TOP, SCREEN_HEIGHT, SCREEN_WIDTH } from '../../constants/Constants';
 
 interface Props {
-  isRTL: boolean,
   strings: any,
   isVisible: boolean,
   onSeeTerms(): void,
   onApprovedTerms(): void
 }
 
-const ForceTerms = ({ isVisible, isRTL, strings, onSeeTerms, onApprovedTerms }: Props) => {
+const ForceTerms = ({ isVisible, strings, onSeeTerms, onApprovedTerms }: Props) => {
   const animRef = useRef<any>(null);
   const [isTOUAccepted, setIsTOUAccepted] = useState(false);
 
@@ -43,7 +42,6 @@ const ForceTerms = ({ isVisible, isRTL, strings, onSeeTerms, onApprovedTerms }:
         <View style={{ alignItems: 'center' }}>
           <Animatable.View ref={animRef} style={{ marginBottom: 25 }}>
             <TermsOfUse
-              isRTL={isRTL}
               strings={strings}
               value={isTOUAccepted}
               onValueSelected={value => setIsTOUAccepted(value)}

src/components/common/TermsOfUse.tsx

@@ -4,22 +4,21 @@ import { Icon, TouchableOpacity, Text } from '.';
 import { SCREEN_WIDTH, TEXT_COLOR, USAGE_ON_BOARDING } from '../../constants/Constants';
 
 interface Props {
-  isRTL: boolean,
   strings: any,
   value: boolean,
   onValueSelected(value: boolean): void,
   toggleWebview(isShow: boolean, usageType: string): void
 }
 
-const TermsOfUse = ({ isRTL, strings: { location: { consent1, consent2 } }, value, onValueSelected, toggleWebview }: Props) => {
+const TermsOfUse = ({ strings: { location: { consent1, consent2 } }, value, onValueSelected, toggleWebview }: Props) => {
   return (
     <TouchableOpacity onPress={() => onValueSelected(!value)}>
-      <View style={[styles.container, { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
+      <View style={[styles.container, { flexDirection: 'row' }]}>
         <View style={styles.box}>
           {value && <Icon source={require('../../assets/onboarding/checked.png')} height={8} width={12} customStyles={{ tintColor: TEXT_COLOR }} />}
         </View>
 
-        <Text style={{ paddingHorizontal: 10, textAlign: isRTL ? 'right' : 'left' }}>
+        <Text style={{ paddingHorizontal: 10 }}>
           <Text style={[styles.text]}>{consent1}</Text>
           <Text style={[styles.text, { textDecorationLine: 'underline' }]} onPress={() => toggleWebview(true, USAGE_ON_BOARDING)}>{consent2}</Text>
         </Text>