fix: increase react version

example/package.json

@@ -6,47 +6,54 @@
   "private": true,
   "scripts": {
     "eas-build-pre-install": "cd .. && yarn",
-    "start": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start",
+    "start": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --go",
     "android": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --android",
     "android:native": "EXPO_NO_TYPESCRIPT_SETUP=1 expo run:android",
     "ios": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --ios",
     "web": "EXPO_NO_TYPESCRIPT_SETUP=1 expo start --web"
   },
   "dependencies": {
-    "@expo/vector-icons": "^13.0.0",
-    "@expo/webpack-config": "^18.0.1",
+    "@expo/vector-icons": "14.0.0",
+    "@expo/webpack-config": "19.0.1",
     "@pchmn/expo-material3-theme": "^1.0.1",
-    "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-masked-view/masked-view": "0.2.8",
+    "@react-native-async-storage/async-storage": "1.21.0",
+    "@react-native-masked-view/masked-view": "0.3.0",
     "@react-navigation/bottom-tabs": "^6.5.3",
     "@react-navigation/drawer": "^6.5.7",
     "@react-navigation/native": "^6.1.2",
     "@react-navigation/stack": "^6.3.11",
-    "expo": "~48.0.18",
-    "expo-dev-client": "~2.2.1",
-    "expo-font": "~11.1.1",
-    "expo-keep-awake": "~12.0.1",
-    "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
+    "expo": "50.0.12",
+    "expo-dev-client": "3.3.11",
+    "expo-font": "11.10.3",
+    "expo-keep-awake": "12.8.2",
+    "expo-splash-screen": "0.26.5",
+    "expo-status-bar": "1.11.1",
     "expo-updates": "~0.16.4",
     "file-loader": "^6.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.8",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
+    "react-native": "0.73.6",
+    "react-native-gesture-handler": "2.14.0",
+    "react-native-reanimated": "3.6.2",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "3.29.0",
     "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "~0.18.7",
+    "react-native-web": "0.19.6",
     "typeface-roboto": "^1.1.13"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-preset-expo": "^9.3.0"
+    "babel-preset-expo": "10.0.0"
   },
   "resolutions": {
     "expo/expo-asset": "8.9.1"
+  },
+  "expo": {
+    "install": {
+      "exclude": [
+        "expo", "expo-updates"
+      ]
+    }
   }
 }

example/src/DrawerItems.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { I18nManager, StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View, Platform } from 'react-native';
 
 import { DrawerContentScrollView } from '@react-navigation/drawer';
-import * as Updates from 'expo-updates';
 import {
   Badge,
   Drawer,
@@ -99,27 +98,17 @@ function DrawerItems() {
   const {
     toggleShouldUseDeviceColors,
     toggleTheme,
-    toggleRtl: toggleRTL,
     toggleThemeVersion,
     toggleCollapsed,
     toggleCustomFont,
     toggleRippleEffect,
     customFontLoaded,
     rippleEffectEnabled,
     collapsed,
-    rtl: isRTL,
     theme: { dark: isDarkTheme },
     shouldUseDeviceColors,
   } = preferences;
 
-  const _handleToggleRTL = () => {
-    toggleRTL();
-    I18nManager.forceRTL(!isRTL);
-    if (isWeb) {
-      Updates.reloadAsync();
-    }
-  };
-
   const coloredLabelTheme = {
     colors: isV3
       ? {
@@ -191,14 +180,12 @@ function DrawerItems() {
             </TouchableRipple>
 
             {!isWeb && (
-              <TouchableRipple onPress={_handleToggleRTL}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">RTL</Text>
-                  <View pointerEvents="none">
-                    <Switch value={isRTL} />
-                  </View>
-                </View>
-              </TouchableRipple>
+              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                <Text variant="labelLarge">RTL</Text>
+                <Text style={styles.rtlWarning} variant="bodySmall">
+                  only works from phone config
+                </Text>
+              </View>
             )}
 
             <TouchableRipple onPress={toggleThemeVersion}>
@@ -273,6 +260,9 @@ const styles = StyleSheet.create({
     height: 56,
     paddingHorizontal: 28,
   },
+  rtlWarning: {
+    color: 'red',
+  },
   badge: {
     alignSelf: 'center',
   },

example/src/index.native.tsx

@@ -134,6 +134,7 @@ export default function PaperExample() {
   }, []);
 
   React.useEffect(() => {
+    I18nManager.forceRTL(true);
     const savePrefs = async () => {
       try {
         await AsyncStorage.setItem(
@@ -149,7 +150,15 @@ export default function PaperExample() {
 
       if (I18nManager.getConstants().isRTL !== rtl) {
         I18nManager.forceRTL(rtl);
-        Updates.reloadAsync();
+        try {
+          // You cannot use the Updates module in development mode in a production app.
+          // To test manual updates, publish your project using `expo publish` and open
+          // the published version in this development client.
+          // https://docs.expo.dev/versions/latest/sdk/updates/#updatesreloadasync
+          await Updates.reloadAsync();
+        } catch (e) {
+          console.log('Error: Updates.reloadAsync', e);
+        }
       }
     };