fix: handle RTL when example app running in Expo Go

Author: BogiKay

example/app.json

@@ -13,11 +13,7 @@
       "config": "./metro.config.js",
       "projectRoots": ""
     },
-    "platforms": [
-      "android",
-      "ios",
-      "web"
-    ],
+    "platforms": ["android", "ios", "web"],
     "owner": "react-native-paper",
     "ios": {
       "bundleIdentifier": "com.callstack.reactnativepaperexample",
@@ -26,10 +22,7 @@
     "android": {
       "package": "com.callstack.reactnativepaperexample",
       "versionCode": 28,
-      "permissions": [
-        "READ_EXTERNAL_STORAGE",
-        "WRITE_EXTERNAL_STORAGE"
-      ],
+      "permissions": ["READ_EXTERNAL_STORAGE", "WRITE_EXTERNAL_STORAGE"],
       "icon": "./assets/images/paper-icon.png",
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/android-icon.png",
@@ -52,8 +45,6 @@
     "updates": {
       "url": "https://u.expo.dev/ba8f5139-58fe-48f0-b2f2-2d675b6eb2d4"
     },
-    "plugins": [
-      "expo-font"
-    ]
+    "plugins": ["expo-font"]
   }
 }

example/src/DrawerItems.tsx

@@ -2,15 +2,19 @@ import * as React from 'react';
 import { I18nManager, StyleSheet, View, Platform } from 'react-native';
 
 import { DrawerContentScrollView } from '@react-navigation/drawer';
+import Constants, { ExecutionEnvironment } from 'expo-constants';
 import * as Updates from 'expo-updates';
 import {
   Badge,
+  Button,
+  Dialog,
   Drawer,
   MD2Colors,
   MD3Colors,
   Switch,
   Text,
   TouchableRipple,
+  Portal,
 } from 'react-native-paper';
 
 import { deviceColorsSupported, isWeb } from '../utils';
@@ -87,12 +91,15 @@ const DrawerCollapsedItemsData = [
 
 function DrawerItems() {
   const [drawerItemIndex, setDrawerItemIndex] = React.useState<number>(0);
+  const [showRTLDialog, setShowRTLDialog] = React.useState(false);
   const preferences = React.useContext(PreferencesContext);
 
   const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
 
   const { isV3, colors } = useExampleTheme();
   const isIOS = Platform.OS === 'ios';
+  const expoGoExecution =
+    Constants.executionEnvironment === ExecutionEnvironment.StoreClient;
 
   if (!preferences) throw new Error('PreferencesContext not provided');
 
@@ -113,13 +120,22 @@ function DrawerItems() {
   } = preferences;
 
   const _handleToggleRTL = () => {
+    if (expoGoExecution) {
+      setShowRTLDialog(true);
+      return;
+    }
+
     toggleRTL();
     I18nManager.forceRTL(!isRTL);
     if (isWeb) {
       Updates.reloadAsync();
     }
   };
 
+  const _handleDismissRTLDialog = () => {
+    setShowRTLDialog(false);
+  };
+
   const coloredLabelTheme = {
     colors: isV3
       ? {
@@ -254,6 +270,24 @@ function DrawerItems() {
           </Text>
         </>
       )}
+      <Portal>
+        <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
+          <Dialog.Title>Changing to RTL</Dialog.Title>
+          <Dialog.Content>
+            <Text variant="bodyMedium">
+              Due to Expo Go limitations it is impossible to change RTL
+              dynamically. To do so, you need to create a development build of
+              Example app or change it statically by setting{' '}
+              <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
+              <Text variant="labelMedium">app.json</Text> within{' '}
+              <Text variant="labelMedium">example</Text> directory.
+            </Text>
+            <Dialog.Actions>
+              <Button onPress={_handleDismissRTLDialog}>Ok</Button>
+            </Dialog.Actions>
+          </Dialog.Content>
+        </Dialog>
+      </Portal>
     </DrawerContentScrollView>
   );
 }