#203 RTL is not handled in inji app

components/LanguageSelector.tsx

@@ -1,19 +1,35 @@
 import React from 'react';
 import { SUPPORTED_LANGUAGES } from '../i18n';
-import { View } from 'react-native';
+import { I18nManager, View } from 'react-native';
 import { Picker } from './ui/Picker';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useTranslation } from 'react-i18next';
+import i18next from 'i18next';
+import RNRestart from 'react-native-restart';
 
 export const LanguageSelector: React.FC<LanguageSelectorProps> = (props) => {
   const { i18n } = useTranslation();
   const languages = Object.entries(SUPPORTED_LANGUAGES).map(
     ([value, label]) => ({ label, value })
   );
 
-  const changeLanguage = async (value: string) => {
-    await i18n.changeLanguage(value);
-    await AsyncStorage.setItem('language', i18n.language);
+  const changeLanguage = async (language: string) => {
+    if (language !== i18n.language) {
+      await i18n.changeLanguage(language).then(async () => {
+        await AsyncStorage.setItem('language', i18n.language);
+        const isRTL = i18next.dir(language) === 'rtl' ? true : false;
+        if (isRTL !== I18nManager.isRTL) {
+          try {
+            I18nManager.forceRTL(isRTL);
+            setTimeout(() => {
+              RNRestart.Restart();
+            }, 150);
+          } catch (e) {
+            console.log('error', e);
+          }
+        }
+      });
+    }
   };
 
   return (

components/VcDetails.tsx

@@ -31,30 +31,31 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
     <Column>
       <Row pY={16} pX={8} align="space-between">
         <Column fill elevation={1} pY={12} pX={16} margin="0 8">
-          <Text size="smaller" color={Colors.Grey}>
+          <Text size="smaller" color={Colors.Grey} align="left">
             {t('generatedOn')}
           </Text>
-          <Text weight="bold" size="smaller">
+          <Text weight="bold" size="smaller" align="left">
             {new Date(props.vc?.generatedOn).toLocaleDateString()}
           </Text>
         </Column>
         <Column fill elevation={1} pY={12} pX={16} margin="0 8">
           <Text
             size="smaller"
+            align="left"
             color={Colors.Grey}
             style={{ textTransform: 'uppercase' }}>
             {props.vc?.idType}
           </Text>
-          <Text weight="bold" size="smaller">
+          <Text weight="bold" size="smaller" align="left">
             {props.vc?.id}
           </Text>
         </Column>
         <Column fill elevation={1} pY={12} pX={16} margin="0 8">
-          <Text size="smaller" color={Colors.Grey}>
+          <Text size="smaller" align="left" color={Colors.Grey}>
             {t('status')}
           </Text>
           <Row>
-            <Text weight="bold" size="smaller">
+            <Text weight="bold" size="smaller" align="left">
               {t('valid')}
             </Text>
             {props.vc?.isVerified && <VerifiedIcon />}

components/VcItem.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { useInterpret, useSelector } from '@xstate/react';
-import { Pressable, StyleSheet } from 'react-native';
+import { I18nManager, Pressable, StyleSheet } from 'react-native';
 import { CheckBox, Icon } from 'react-native-elements';
 import { ActorRefFrom } from 'xstate';
 import {
@@ -21,6 +21,7 @@ const styles = StyleSheet.create({
   title: {
     color: Colors.Black,
     backgroundColor: 'transparent',
+    textAlign: 'left',
   },
   loadingTitle: {
     color: 'transparent',
@@ -65,7 +66,7 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
       onPress={() => props.onPress(service)}
     />
   ) : (
-    <Icon name="chevron-right" />
+    <Icon name={I18nManager.isRTL ? 'chevron-left' : 'chevron-right'} />
   );
 
   return (

components/ui/TextItem.tsx

@@ -12,6 +12,7 @@ export const TextItem: React.FC<TextItemProps> = (props) => {
       style={{
         borderBottomColor: Colors.Grey6,
         borderBottomWidth: props.divider ? 1 : 0,
+        alignItems: 'flex-start',
       }}>
       {props.label && (
         <Text size="smaller" color={Colors.Grey} weight="semibold">