[PB-6923] feature/Upgrade Expo to SDK 57 and adapt the JS code

app.config.ts

@@ -20,12 +20,6 @@ const appConfig: ExpoConfig & { extra: AppEnv & { NODE_ENV: AppStage; RELEASE_ID
   slug: 'drive-mobile',
   version: packageVersion,
   orientation: 'portrait',
-  newArchEnabled: true,
-  splash: {
-    image: './assets/images/splash.png',
-    resizeMode: 'cover',
-    backgroundColor: '#091e42',
-  },
   userInterfaceStyle: 'automatic',
 
   updates: {
@@ -35,7 +29,6 @@ const appConfig: ExpoConfig & { extra: AppEnv & { NODE_ENV: AppStage; RELEASE_ID
   assetBundlePatterns: ['**/*'],
   runtimeVersion: packageVersion,
   ios: {
-    jsEngine: 'hermes',
     icon: './assets/icon-ios.png',
     supportsTablet: true,
     bundleIdentifier: 'com.internxt.snacks',
@@ -59,7 +52,6 @@ const appConfig: ExpoConfig & { extra: AppEnv & { NODE_ENV: AppStage; RELEASE_ID
     },
   },
   android: {
-    jsEngine: 'hermes',
     versionCode: env[stage].ANDROID_VERSION_CODE,
     icon: './assets/icon-android.png',
     adaptiveIcon: {
@@ -94,10 +86,6 @@ const appConfig: ExpoConfig & { extra: AppEnv & { NODE_ENV: AppStage; RELEASE_ID
     barStyle: 'light-content',
     backgroundColor: '#091e42',
   },
-  androidNavigationBar: {
-    barStyle: 'dark-content',
-    backgroundColor: '#091e42',
-  },
   extra: {
     eas: {
       projectId: '680f4feb-6315-4a50-93ec-36dcd0b831d2',
@@ -107,15 +95,22 @@ const appConfig: ExpoConfig & { extra: AppEnv & { NODE_ENV: AppStage; RELEASE_ID
     ...env[stage],
   },
   plugins: [
+    '@react-native-community/datetimepicker',
     'expo-asset',
     'expo-font',
+    'expo-image',
     'expo-localization',
     'expo-secure-store',
+    'expo-sharing',
     'expo-sqlite',
+    'expo-status-bar',
     ['expo-screen-orientation', { initialOrientation: 'PORTRAIT' }],
     [
       'expo-splash-screen',
       {
+        image: './assets/images/splash.png',
+        resizeMode: 'cover',
+        backgroundColor: '#091e42',
         android: {
           backgroundColor: '#091e42',
           image: './assets/images/splash.png',

jest.config.ts

@@ -43,6 +43,7 @@ const config: Config.InitialOptions = {
   testRegex: ['\\.spec\\.ts$', '\\.spec\\.tsx$'],
   setupFiles: ['./jest.setup.ts'],
   setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  resolver: 'react-native-worklets/jest/resolver',
   transform: {
     '\\.mjs$': 'babel-jest',
   },

package.json

@@ -38,7 +38,7 @@
     "@internxt/rn-crypto": "0.1.15",
     "@internxt/sdk": "1.20.2",
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-native-community/datetimepicker": "8.4.4",
+    "@react-native-community/datetimepicker": "9.1.0",
     "@react-native-documents/picker": "^12.0.1",
     "@react-navigation/bottom-tabs": "^7",
     "@react-navigation/drawer": "^7",
@@ -58,35 +58,35 @@
     "dayjs": "^1.11.19",
     "entities": "^4.5.0",
     "events": "^3.3.0",
-    "expo": "^54",
-    "expo-application": "~7.0.8",
-    "expo-asset": "~12.0.13",
-    "expo-clipboard": "~8.0.8",
-    "expo-constants": "~18.0.13",
-    "expo-device": "~8.0.10",
-    "expo-document-picker": "~14.0.8",
-    "expo-file-system": "~19.0.23",
-    "expo-font": "~14.0.12",
-    "expo-image": "~3.0.11",
-    "expo-image-manipulator": "~14.0.8",
-    "expo-image-picker": "~17.0.11",
-    "expo-keep-awake": "~15.0.8",
-    "expo-linear-gradient": "~15.0.8",
-    "expo-linking": "~8.0.12",
-    "expo-local-authentication": "~17.0.8",
-    "expo-localization": "~17.0.9",
-    "expo-media-library": "~18.2.1",
-    "expo-navigation-bar": "~5.0.10",
-    "expo-network": "~8.0.8",
-    "expo-screen-orientation": "~9.0.9",
-    "expo-secure-store": "~15.0.8",
-    "expo-share-extension": "5.0.6",
-    "expo-sharing": "~14.0.8",
-    "expo-splash-screen": "~31.0.13",
-    "expo-sqlite": "~16.0.10",
-    "expo-status-bar": "~3.0.9",
-    "expo-system-ui": "~6.0.9",
-    "expo-updates": "~29.0.18",
+    "expo": "^57.0.26",
+    "expo-application": "~57.0.3",
+    "expo-asset": "~57.0.18",
+    "expo-clipboard": "~57.0.2",
+    "expo-constants": "~57.0.20",
+    "expo-device": "~57.0.2",
+    "expo-document-picker": "~57.0.3",
+    "expo-file-system": "~57.0.7",
+    "expo-font": "~57.0.4",
+    "expo-image": "~57.0.5",
+    "expo-image-manipulator": "~57.0.20",
+    "expo-image-picker": "~57.0.20",
+    "expo-keep-awake": "~57.0.2",
+    "expo-linear-gradient": "~57.0.2",
+    "expo-linking": "~57.0.11",
+    "expo-local-authentication": "~57.0.3",
+    "expo-localization": "~57.0.2",
+    "expo-media-library": "~57.0.5",
+    "expo-navigation-bar": "~57.0.3",
+    "expo-network": "~57.0.2",
+    "expo-screen-orientation": "~57.0.2",
+    "expo-secure-store": "~57.0.4",
+    "expo-share-extension": "6.0.0-beta",
+    "expo-sharing": "~57.0.22",
+    "expo-splash-screen": "~57.0.9",
+    "expo-sqlite": "~57.0.3",
+    "expo-status-bar": "~57.0.1",
+    "expo-system-ui": "~57.0.4",
+    "expo-updates": "~57.0.24",
     "htmlparser2": "^10.1.0",
     "internxt-crypto": "1.6.1",
     "intl": "^1.2.5",
@@ -97,18 +97,18 @@
     "phosphor-react-native": "3.0.3",
     "prettysize": "^2.0.0",
     "process": "^0.11.10",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-hook-form": "^7.32.0",
-    "react-native": "0.81.5",
+    "react-native": "0.86.3",
     "react-native-blob-util": "^0.24.6",
     "react-native-capture-protection": "2.4.0",
     "react-native-create-thumbnail": "2.2.0",
     "react-native-crypto": "^2.2.1",
     "react-native-device-info": "^8.4.8",
     "react-native-enriched-html": "^1.1.1",
     "react-native-file-viewer": "^2.1.4",
-    "react-native-gesture-handler": "~2.28.0",
+    "react-native-gesture-handler": "~2.32.0",
     "react-native-get-random-values": "~1.11.0",
     "react-native-logs": "^5.0.1",
     "react-native-modal": "^14.0.0-rc.1",
@@ -117,19 +117,19 @@
     "react-native-permissions": "^3.2.0",
     "react-native-progress": "^5.0.0",
     "react-native-randombytes": "^3.6.2",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
     "react-native-share": "^7.3.3",
-    "react-native-svg": "15.12.1",
+    "react-native-svg": "15.15.4",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-toast-message": "^2.1.1",
     "react-native-url-polyfill": "^3.0.0",
     "react-native-uuid": "^2.0.1",
     "react-native-video": "6.18.0",
     "react-native-web": "^0.21.0",
-    "react-native-webview": "13.15.0",
-    "react-native-worklets": "0.5.1",
+    "react-native-webview": "13.16.1",
+    "react-native-worklets": "0.10.1",
     "react-redux": "^7.2.2",
     "readable-stream": "^4.7.0",
     "recyclerlistview": "^4.1.3",
@@ -149,6 +149,7 @@
     "@babel/preset-env": "^7.28.5",
     "@internxt/eslint-config-internxt": "^1.0.9",
     "@internxt/prettier-config": "^2.0.1",
+    "@react-native/jest-preset": "^0.86.3",
     "@testing-library/jest-native": "^4.0.13",
     "@testing-library/react-native": "^12.8.0",
     "@types/async": "^3.2.6",
@@ -162,21 +163,21 @@
     "@welldone-software/why-did-you-render": "^7.0.1",
     "autoprefixer": "^10.4.23",
     "babel-plugin-module-resolver": "^5.0.2",
-    "babel-preset-expo": "~54.0.11",
+    "babel-preset-expo": "~57.0.0",
     "concurrently": "^9.2.1",
     "detox": "^19.7.0",
     "eslint": "^8.8.0",
     "hash-wasm": "^4.11.0",
     "husky": "^9.1.7",
     "jest": "^29.3.1",
-    "jest-expo": "~54.0.17",
+    "jest-expo": "~57.0.5",
     "patch-package": "^8.0.1",
     "path": "^0.12.7",
     "postcss": "^8.5.23",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.7.4",
     "react-native-svg-transformer": "1.5.2",
-    "react-test-renderer": "19.0.0",
+    "react-test-renderer": "19.2.3",
     "redux-devtools-extension": "^2.13.8",
     "tailwindcss": "^3.0.0",
     "ts-jest": "^29.4.6",
@@ -192,6 +193,13 @@
     "shell-quote": "^1.8.4",
     "postcss": "^8.5.23",
     "socket.io-client/engine.io-client/ws": "^8.21.0",
-    "axios": "1.18.1"
+    "axios": "1.20.0"
+  },
+  "expo": {
+    "install": {
+      "exclude": [
+        "typescript"
+      ]
+    }
   }
 }

src/App.tsx

@@ -20,7 +20,6 @@ import { useKeepAwake } from 'expo-keep-awake';
 import { DriveContextProvider } from './contexts/Drive';
 import { ThemeProvider, useTheme } from './contexts/Theme';
 import { useLoadFonts } from './helpers';
-import useGetColor from './hooks/useColor';
 import { useScreenProtection } from './hooks/useScreenProtection';
 import { useSecurity } from './hooks/useSecurity';
 import Navigation from './navigation';
@@ -46,7 +45,6 @@ function AppContent(): JSX.Element {
   const navigationRef = useNavigationContainerRef<RootStackParamList>();
   const dispatch = useAppDispatch();
   const tailwind = useTailwind();
-  const getColor = useGetColor();
   const { theme } = useTheme();
 
   const { isReady: fontsAreReady } = useLoadFonts();
@@ -197,22 +195,20 @@ function AppContent(): JSX.Element {
   }, []);
 
   useEffect(() => {
-    const configureNavigationBar = async () => {
+    const configureNavigationBar = () => {
       if (Platform.OS === 'android') {
         try {
-          const backgroundColor = getColor('bg-surface');
           const isDark = theme === 'dark';
 
-          await NavigationBar.setBackgroundColorAsync(backgroundColor);
-          await NavigationBar.setButtonStyleAsync(isDark ? 'light' : 'dark');
+          NavigationBar.setStyle(isDark ? 'light' : 'dark');
         } catch (error) {
           logger.error('Error configuring navigation bar:', error);
         }
       }
     };
 
     configureNavigationBar();
-  }, [getColor, theme]);
+  }, [theme]);
 
   useEffect(() => {
     const globalListener = appService.onAppStateChange(handleGlobalAppStateChange);

src/components/AppScreen/index.tsx

@@ -1,6 +1,6 @@
 import { StatusBar, StatusBarStyle } from 'expo-status-bar';
 import React from 'react';
-import { Keyboard, Platform, StyleProp, View, ViewStyle, useColorScheme } from 'react-native';
+import { Keyboard, StyleProp, View, ViewStyle, useColorScheme } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTailwind } from 'tailwind-rn';
@@ -10,7 +10,6 @@ interface AppScreenProps {
   backgroundColor?: string;
   safeAreaColor?: string;
   statusBarHidden?: boolean;
-  statusBarTranslucent?: boolean;
   statusBarStyle?: StatusBarStyle;
   safeAreaTop?: boolean;
   safeAreaBottom?: boolean;
@@ -31,8 +30,6 @@ const AppScreen = (props: AppScreenProps): JSX.Element => {
   const backgroundColor = props.backgroundColor || getColor('bg-surface');
 
   const statusBarStyle = props.statusBarStyle || (isDark ? 'light' : 'dark');
-  const statusBarBackgroundColor = Platform.OS === 'android' ? backgroundColor : undefined;
-  const statusBarTranslucent = props.statusBarTranslucent ?? (Platform.OS === 'android' ? false : undefined);
 
   const onBackgroundPressed = () => {
     Keyboard.dismiss();
@@ -56,12 +53,7 @@ const AppScreen = (props: AppScreenProps): JSX.Element => {
         }}
       />
 
-      <StatusBar
-        hidden={props.statusBarHidden}
-        style={statusBarStyle}
-        translucent={statusBarTranslucent}
-        backgroundColor={statusBarBackgroundColor}
-      />
+      <StatusBar hidden={props.statusBarHidden} style={statusBarStyle} />
 
       {/* DISMISS KEYBOARD ON OUTSIDE TAP */}
       <TouchableWithoutFeedback onPress={onBackgroundPressed}>

src/components/CopyableText/index.tsx

@@ -1,4 +1,4 @@
-import { setString } from 'expo-clipboard';
+import { setStringAsync } from 'expo-clipboard';
 import { Copy } from 'phosphor-react-native';
 import { TouchableOpacity, View } from 'react-native';
 import useGetColor from 'src/hooks/useColor';
@@ -12,8 +12,8 @@ interface CopyableTextProps {
 const CopyableText = (props: CopyableTextProps) => {
   const tailwind = useTailwind();
   const getColor = useGetColor();
-  const onPress = () => {
-    setString(props.children);
+  const onPress = async () => {
+    await setStringAsync(props.children);
   };
 
   return (

src/components/LockedFeatureOverlay/index.tsx

@@ -29,7 +29,7 @@ const LockedFeatureOverlay = ({
   const getColor = useGetColor();
 
   return (
-    <View style={[StyleSheet.absoluteFillObject, styles.backdrop]}>
+    <View style={[StyleSheet.absoluteFill, styles.backdrop]}>
       <View style={[styles.card, { backgroundColor: getColor('bg-surface'), borderColor: getColor('border-gray-10') }]}>
         <View
           style={[styles.iconTile, { backgroundColor: getColor('bg-gray-1'), borderColor: getColor('border-gray-10') }]}

src/components/modals/AddModal/index.tsx

@@ -14,7 +14,7 @@ import {
   requestCameraPermissionsAsync,
   UIImagePickerPreferredAssetRepresentationMode,
 } from 'expo-image-picker';
-import * as MediaLibrary from 'expo-media-library';
+import * as MediaLibrary from 'expo-media-library/legacy';
 import { ReactNode, useCallback, useState } from 'react';
 import { Alert, PermissionsAndroid, Platform } from 'react-native';
 

src/components/modals/BottomModal/index.tsx

@@ -1,4 +1,4 @@
-import { Platform, StyleProp, TouchableWithoutFeedback, useColorScheme, View, ViewStyle } from 'react-native';
+import { StyleProp, TouchableWithoutFeedback, useColorScheme, View, ViewStyle } from 'react-native';
 import Modal from 'react-native-modal';
 
 import { StatusBar } from 'expo-status-bar';
@@ -35,7 +35,6 @@ const BottomModal = (props: BottomModalProps): JSX.Element => {
   const safeAreaColor = props.safeAreaColor || getColor('bg-surface');
 
   const statusBarStyle = isDark ? 'light' : 'dark';
-  const isTranslucent = Platform.OS === 'android';
 
   return (
     <Modal
@@ -56,7 +55,7 @@ const BottomModal = (props: BottomModalProps): JSX.Element => {
       coverScreen={false}
     >
       <View style={[tailwind('h-full bg-transparent'), { paddingTop: props.ignoreSafeAreaTop ? 0 : safeAreaInsets.top }]}>
-        <StatusBar style={statusBarStyle} translucent={isTranslucent} />
+        <StatusBar style={statusBarStyle} />
 
         <TouchableWithoutFeedback hitSlop={INCREASED_TOUCH_AREA} onPress={props.onClosed}>
           <View style={tailwind('flex-grow')}>