From 035dc0de8779385211f0112cc49dc868bc9a77d6 Mon Sep 17 00:00:00 2001 From: Ramon Candel Date: Tue, 29 Sep 2026 17:04:11 +0200 Subject: [PATCH] Upgrade Expo to SDK 57 and adapt the JS code to its breaking changes --- app.config.ts | 19 +- jest.config.ts | 1 + package.json | 94 +- src/App.tsx | 10 +- src/components/AppScreen/index.tsx | 12 +- src/components/CopyableText/index.tsx | 6 +- src/components/LockedFeatureOverlay/index.tsx | 2 +- src/components/modals/AddModal/index.tsx | 2 +- src/components/modals/BottomModal/index.tsx | 5 +- src/components/modals/CenterModal/index.tsx | 5 +- .../SharedLinkSettingsModal.tsx | 4 +- .../photos/VideoViewer/VideoViewer.tsx | 2 - .../components/ActionProgressModal.tsx | 2 +- .../GroupHeader/PhotosGroupHeader.tsx | 6 +- .../components/MoreActionsBottomSheet.tsx | 4 +- .../PhotosScreen/components/PhotoItem.tsx | 16 +- .../PhotosScreen/hooks/useLocalAssets.spec.ts | 4 +- .../PhotosScreen/hooks/useLocalAssets.ts | 2 +- .../PhotosScreen/hooks/usePagedLocalAssets.ts | 2 +- .../PhotosScreen/hooks/useSelectMorePhotos.ts | 2 +- .../utils/photoTimelineGroups.spec.ts | 4 +- .../PhotosScreen/utils/photoTimelineGroups.ts | 2 +- .../DrivePreviewScreen/DrivePreviewScreen.tsx | 1 - src/services/NotificationsService.ts | 6 +- .../photos/PhotoActionsService.spec.ts | 4 +- src/services/photos/PhotoActionsService.ts | 2 +- src/services/photos/PhotoAssetScanner.ts | 2 +- src/services/photos/PhotoDeduplicator.ts | 2 +- .../photos/PhotoMediaLibraryService.spec.ts | 4 +- .../photos/PhotoMediaLibraryService.ts | 2 +- src/services/photos/PhotoUploadQueue.spec.ts | 2 +- src/services/photos/PhotoUploadQueue.ts | 2 +- .../photos/PhotoUploadService.spec.ts | 4 +- src/services/photos/PhotoUploadService.ts | 2 +- .../photos/burst/BurstUploadHandler.ts | 2 +- .../photos/livePhoto.constants.spec.ts | 2 +- src/services/photos/livePhoto.constants.ts | 2 +- .../photos/photoPermissionService.spec.ts | 4 +- src/services/photos/photoPermissionService.ts | 2 +- .../components/UploadSuccessCard.tsx | 2 +- src/store/slices/photos/thunks/upload.ts | 2 +- yarn.lock | 2313 +++++++++-------- 42 files changed, 1275 insertions(+), 1293 deletions(-) diff --git a/app.config.ts b/app.config.ts index 27ec2eeb6..a793d7889 100644 --- a/app.config.ts +++ b/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', diff --git a/jest.config.ts b/jest.config.ts index ff2316bad..aa3460e34 100644 --- a/jest.config.ts +++ b/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', }, diff --git a/package.json b/package.json index cdbe1ddd4..99640aa71 100644 --- a/package.json +++ b/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,10 +97,10 @@ "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", @@ -108,7 +108,7 @@ "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", @@ -193,5 +194,12 @@ "postcss": "^8.5.23", "socket.io-client/engine.io-client/ws": "^8.21.0", "axios": "1.18.1" + }, + "expo": { + "install": { + "exclude": [ + "typescript" + ] + } } } diff --git a/src/App.tsx b/src/App.tsx index c618ebd06..4e7d9f7b8 100644 --- a/src/App.tsx +++ b/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(); const dispatch = useAppDispatch(); const tailwind = useTailwind(); - const getColor = useGetColor(); const { theme } = useTheme(); const { isReady: fontsAreReady } = useLoadFonts(); @@ -199,14 +197,12 @@ 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); } @@ -214,7 +210,7 @@ function AppContent(): JSX.Element { }; configureNavigationBar(); - }, [getColor, theme]); + }, [theme]); useEffect(() => { const globalListener = appService.onAppStateChange(handleGlobalAppStateChange); diff --git a/src/components/AppScreen/index.tsx b/src/components/AppScreen/index.tsx index 3113fda02..81a04fd5c 100644 --- a/src/components/AppScreen/index.tsx +++ b/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 => { }} /> -