RTL switch

packages/app/components/setLanguage.component.tsx

@@ -11,11 +11,12 @@ import React, { useState } from 'react'
 import { SafeAreaView, StyleSheet, View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { useLanguage } from '../hooks/useLanguage'
-import { LanguageService } from '../services/languageService'
+import { isRTL, LanguageService } from '../services/languageService'
 import { Colors, Layout as LayoutStyle, Sizing } from '../styles'
 import { translate } from '../utils/translation'
 import { BackIcon } from './icon.component'
 import { SafeAreaViewContainer } from './safeAreaViewContainer.component'
+import RNRestart from 'react-native-restart'
 
 export const SetLanguage = () => {
   const navigation = useNavigation()
@@ -27,9 +28,19 @@ export const SetLanguage = () => {
   )
   const { setLanguageCode } = useLanguage()
 
+  const shouldRestart = () => {
+    return isRTL(selectedLanguage) || isRTL(currentLanguage)
+  }
+
   const saveLanguage = () => {
     setLanguageCode({ languageCode: selectedLanguage })
-    goBack()
+
+    // Checks if rtl mode has changed, then we need to restart the app
+    if (shouldRestart()) {
+      RNRestart.Restart()
+    } else {
+      goBack()
+    }
   }
 
   const isSelected = (lang: string): boolean => {

packages/app/ios/Podfile.lock

@@ -272,6 +272,8 @@ PODS:
     - React
   - react-native-cookies (5.0.1):
     - React-Core
+  - react-native-restart (0.0.22):
+    - React-Core
   - react-native-safe-area-context (3.2.0):
     - React-Core
   - react-native-simple-toast (1.1.3):
@@ -406,6 +408,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - "react-native-cookies (from `../node_modules/@react-native-community/cookies`)"
+  - react-native-restart (from `../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-simple-toast (from `../node_modules/react-native-simple-toast`)
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -483,6 +486,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/blur"
   react-native-cookies:
     :path: "../node_modules/@react-native-community/cookies"
+  react-native-restart:
+    :path: "../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-simple-toast:
@@ -562,6 +567,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 0ae35a37b20d5e031eb020a69cc5afdbd6406301
   react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-cookies: ce50e42ace7cf0dd47769260ca5bbe8eee607e4e
+  react-native-restart: 733a51ad137f15b0f8dc34c4082e55af7da00979
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   react-native-simple-toast: bf002828cf816775a6809f7a9ec3907509bce11f
   react-native-webview: 71567b6bf3d4e55914e580d720cc8f7df64af817

packages/app/package.json

@@ -45,6 +45,7 @@
     "react-native-localize": "^2.0.2",
     "react-native-markdown-display": "7.0.0-alpha.2",
     "react-native-modal-datetime-picker": "9.2.0",
+    "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "2.18.1",
     "react-native-simple-toast": "1.1.3",

packages/app/services/languageService.ts

@@ -22,8 +22,8 @@ const rtlList: { [key: string]: boolean } = {
   ar: true,
 }
 
-const isRTL = (langCode: string) => {
-  if (!isRTL.hasOwnProperty(langCode)) {
+export const isRTL = (langCode: string) => {
+  if (!rtlList.hasOwnProperty(langCode)) {
     return false
   }
   return rtlList[langCode]

packages/app/yarn.lock

@@ -7493,6 +7493,11 @@ react-native-modal-datetime-picker@9.2.0:
   dependencies:
     prop-types "^15.7.2"
 
+react-native-restart@^0.0.22:
+  version "0.0.22"
+  resolved "https://registry.yarnpkg.com/react-native-restart/-/react-native-restart-0.0.22.tgz#81fcb7f31e35951d85410c68b9556acf3ab88705"
+  integrity sha512-XwCqAMAKsO8yCM3xACPFKvkDQZe41lcavOuO0gUEu803IuTLtciualCq/qs83ryRDCDh1jkXYRqFjsGjLMCN3Q==
+
 react-native-safe-area-context@3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz"