chore(📱) : expo upgrade sdk 52 🚀

jest.config.native.js

@@ -34,12 +34,11 @@ module.exports = {
         '\\.(js|jsx|ts|tsx)$': ['babel-jest', babelConfig],
     },
     transformIgnorePatterns: [
-        'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)',
+        'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)',
     ],
     setupFiles: [
         '<rootDir>/../../node_modules/@shopify/react-native-skia/jestSetup.js',
         '<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js',
-        '<rootDir>/../../suite-native/test-utils/src/setupReactReanimatedMock.js',
         '<rootDir>/../../suite-native/test-utils/src/atomsMock.js',
         '<rootDir>/../../suite-native/test-utils/src/expoMock.js',
         '<rootDir>/../../suite-native/test-utils/src/walletSdkMock.js',

package.json

@@ -98,7 +98,7 @@
     },
     "resolutions": {
         "typescript": "5.5.4",
-        "react-native": "0.75.2",
+        "react-native": "0.76.1",
         "prettier": "3.2.5",
         "type-fest": "4.24.0",
         "bcrypto": "5.4.0",
@@ -134,7 +134,7 @@
         "globals": "^15.11.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "jest-expo": "^50.0.2",
+        "jest-expo": "^52.0.1",
         "metro-react-native-babel-preset": "0.77.0",
         "node-fetch": "^2.6.4",
         "nx": "^18.0.3",

packages/connect-examples/mobile-expo/package.json

@@ -10,11 +10,11 @@
     },
     "dependencies": {
         "@trezor/connect-mobile": "workspace:*",
-        "expo": "51.0.31",
-        "expo-linking": "6.3.1",
-        "expo-status-bar": "1.12.1",
+        "expo": "^52.0.4",
+        "expo-linking": "^7.0.2",
+        "expo-status-bar": "^2.0.0",
         "react": "18.2.0",
-        "react-native": "0.75.2"
+        "react-native": "0.76.1"
     },
     "devDependencies": {
         "@babel/core": "^7.20.0",

packages/react-native-usb/android/build.gradle

@@ -22,7 +22,7 @@ buildscript {
     if (ext.has("kotlinVersion")) {
       ext.kotlinVersion()
     } else {
-      ext.safeExtGet("kotlinVersion", "1.8.10")
+      ext.safeExtGet("kotlinVersion", "1.9.24")
     }
   }
 
@@ -51,7 +51,7 @@ afterEvaluate {
 }
 
 android {
-  compileSdkVersion safeExtGet("compileSdkVersion", 33)
+  compileSdkVersion safeExtGet("compileSdkVersion", 35)
 
   compileOptions {
     sourceCompatibility JavaVersion.VERSION_17
@@ -65,7 +65,7 @@ android {
   namespace "io.trezor.rnusb"
   defaultConfig {
     minSdkVersion safeExtGet("minSdkVersion", 21)
-    targetSdkVersion safeExtGet("targetSdkVersion", 33)
+    targetSdkVersion safeExtGet("targetSdkVersion", 34)
     versionCode 1
     versionName "0.1.0"
   }

packages/react-native-usb/src/ReactNativeUsbModule.ts

@@ -1,5 +1,24 @@
 import { requireNativeModule } from 'expo-modules-core';
+import { NativeModule } from 'expo';
+
+import { NativeDevice } from './ReactNativeUsb.types';
+
+type DeviceEvents = {
+    onDeviceConnect: (device: NativeDevice | null) => void;
+    onDeviceDisconnect: (device: NativeDevice | null) => void;
+};
+
+declare class ReactNativeUsbModuleDeclaration extends NativeModule<DeviceEvents> {
+    open: (deviceName: string) => Promise<void>;
+    close: (deviceName: string) => Promise<void>;
+    claimInterface: (deviceName: string, interfaceNumber: number) => Promise<void>;
+    releaseInterface: (deviceName: string, interfaceNumber: number) => Promise<void>;
+    selectConfiguration: (deviceName: string, configurationValue: number) => Promise<void>;
+    transferIn: (deviceName: string, endpointNumber: number, length: number) => Promise<number[]>;
+    transferOut: (deviceName: string, endpointNumber: number, data: string) => Promise<void>;
+}
 
 // It loads the native module object from the JSI or falls back to
 // the bridge module (from NativeModulesProxy) if the remote debugger is on.
-export const ReactNativeUsbModule = requireNativeModule('ReactNativeUsb');
+export const ReactNativeUsbModule =
+    requireNativeModule<ReactNativeUsbModuleDeclaration>('ReactNativeUsb');

packages/react-native-usb/src/index.ts

@@ -1,19 +1,15 @@
-/* eslint-disable no-console */
-import { NativeModulesProxy, EventEmitter, Subscription } from 'expo-modules-core';
-
 import { ReactNativeUsbModule } from './ReactNativeUsbModule';
 import { NativeDevice, OnConnectEvent, WebUSBDevice } from './ReactNativeUsb.types';
 
 const DEBUG_LOGS = false;
 
 const debugLog = (...args: any[]) => {
     if (DEBUG_LOGS) {
+        // eslint-disable-next-line no-console
         console.log(...args);
     }
 };
 
-const emitter = new EventEmitter(ReactNativeUsbModule ?? NativeModulesProxy.ReactNativeUsb);
-
 const open = (deviceName: string) => ReactNativeUsbModule.open(deviceName);
 
 const close = (deviceName: string) => ReactNativeUsbModule.close(deviceName);
@@ -105,53 +101,45 @@ const createWebUSBDevice = (device: NativeDevice): WebUSBDevice => ({
 // and not send onConnect event if device is already connected.
 const connectedDevices = new Map<string, WebUSBDevice>();
 
-export function onDeviceConnected(listener: (event: OnConnectEvent) => void): Subscription {
-    return emitter.addListener<NativeDevice>('onDeviceConnect', event => {
-        if (!event) {
-            console.error('JS: USB onDeviceConnect: event is null');
-            // just for debugging purposes now
-            alert('JS: USB onDeviceConnect: event is null');
+export function onDeviceConnected(listener: (event: OnConnectEvent) => void) {
+    return ReactNativeUsbModule.addListener('onDeviceConnect', (device: NativeDevice | null) => {
+        if (!device) {
+            debugLog('JS: USB onDeviceConnect: device is null');
+            console.error('JS: USB onDeviceConnect: device is null');
+            alert('JS: USB onDeviceConnect: device is null');
 
             return;
         }
 
-        if (connectedDevices.has(event.deviceName)) {
+        if (connectedDevices.has(device.deviceName)) {
+            console.warn('JS: USB onDeviceConnect: device already connected');
             debugLog('JS: USB onDeviceConnect: device already connected');
 
             return;
         }
 
-        const eventPayload = {
-            device: createWebUSBDevice(event as NativeDevice),
-        };
-
-        debugLog('JS: USB onDeviceConnect', eventPayload);
-
-        connectedDevices.set(event.deviceName, eventPayload.device);
+        const webUSBDevice = createWebUSBDevice(device);
+        connectedDevices.set(device.deviceName, webUSBDevice);
 
-        return listener(eventPayload as any);
+        const event = { device: webUSBDevice, ...new Event('onconnect') } as OnConnectEvent;
+        listener(event);
     });
 }
 
-export function onDeviceDisconnect(listener: (event: OnConnectEvent) => void): Subscription {
-    return emitter.addListener<NativeDevice>('onDeviceDisconnect', event => {
-        if (!event) {
-            console.error('JS: USB onDeviceConnect: event is null');
-            // just for debugging purposes now
-            alert('JS: USB onDeviceConnect: event is null');
+export function onDeviceDisconnect(listener: (event: OnConnectEvent) => void) {
+    return ReactNativeUsbModule.addListener('onDeviceDisconnect', (device: NativeDevice | null) => {
+        if (!device) {
+            debugLog('JS: USB onDeviceDisconnect: device is null');
+            console.error('JS: USB onDeviceDisconnect: device is null');
+            alert('JS: USB onDeviceDisconnect: device is null');
 
             return;
         }
 
-        const eventPayload = {
-            device: createWebUSBDevice(event as NativeDevice),
-        };
-
-        debugLog('JS: USB onDeviceDisconnect', eventPayload);
-
-        connectedDevices.delete(event.deviceName);
-
-        return listener(eventPayload as any);
+        const webUSBDevice = createWebUSBDevice(device);
+        connectedDevices.delete(device.deviceName);
+        const event = { device: webUSBDevice, ...new Event('ondisconnect') } as OnConnectEvent;
+        listener(event);
     });
 }
 

packages/styles/package.json

@@ -27,6 +27,6 @@
         "polished": "^4.3.1",
         "react": "18.2.0",
         "react-fela": "^12.2.1",
-        "react-native": "0.75.2"
+        "react-native": "0.76.1"
     }
 }

suite-native/accounts/package.json

@@ -38,7 +38,7 @@
         "@trezor/styles": "workspace:*",
         "jotai": "1.9.1",
         "react": "18.2.0",
-        "react-native": "0.75.2",
+        "react-native": "0.76.1",
         "react-native-reanimated": "3.16.1",
         "react-redux": "8.0.7"
     }

suite-native/alerts/package.json

@@ -16,7 +16,7 @@
         "@trezor/theme": "workspace:*",
         "jotai": "1.9.1",
         "react": "18.2.0",
-        "react-native": "0.75.2",
+        "react-native": "0.76.1",
         "react-native-reanimated": "3.16.1"
     }
 }

suite-native/app/app.config.ts

@@ -100,9 +100,11 @@ const getPlugins = (): ExpoPlugins => {
             {
                 android: {
                     minSdkVersion: 28,
+                    // this fixes expo-updates build error
+                    kotlinVersion: '1.9.24',
                 },
                 ios: {
-                    deploymentTarget: '14.0',
+                    deploymentTarget: '15.1',
                 },
             },
         ],
@@ -158,7 +160,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
         slug: appSlugs[buildType],
         owner: appOwners[buildType],
         version: suiteNativeVersion,
-        runtimeVersion: '10',
+        runtimeVersion: '11',
         ...(buildType === 'production'
             ? {}
             : {

suite-native/app/package.json

@@ -23,16 +23,16 @@
     "dependencies": {
         "@gorhom/bottom-sheet": "5.0.5",
         "@mobily/ts-belt": "^3.13.1",
-        "@react-native-community/netinfo": "11.3.2",
-        "@react-native/metro-config": "0.75.2",
+        "@react-native-community/netinfo": "^11.4.1",
+        "@react-native/metro-config": "^0.76.1",
         "@react-navigation/bottom-tabs": "6.6.1",
         "@react-navigation/native": "6.1.18",
         "@react-navigation/native-stack": "6.11.0",
         "@reduxjs/toolkit": "1.9.5",
-        "@sentry/integrations": "^7.114.0",
-        "@sentry/react-native": "5.33.0",
-        "@shopify/flash-list": "1.7.1",
-        "@shopify/react-native-skia": "1.3.11",
+        "@sentry/core": "8.34.0",
+        "@sentry/react-native": "6.1.0",
+        "@shopify/flash-list": "^1.7.2",
+        "@shopify/react-native-skia": "^1.5.3",
         "@suite-common/analytics": "workspace:*",
         "@suite-common/connect-init": "workspace:*",
         "@suite-common/formatters": "workspace:*",
@@ -84,38 +84,38 @@
         "@trezor/theme": "workspace:*",
         "@trezor/trezor-user-env-link": "workspace:*",
         "buffer": "^6.0.3",
-        "expo": "51.0.31",
-        "expo-av": "14.0.7",
-        "expo-build-properties": "0.12.5",
-        "expo-camera": "15.0.15",
-        "expo-clipboard": "6.0.3",
-        "expo-crypto": "13.0.2",
-        "expo-dev-client": "4.0.25",
-        "expo-haptics": "13.0.1",
-        "expo-image": "1.12.15",
-        "expo-image-picker": "15.0.7",
-        "expo-linear-gradient": "13.0.2",
-        "expo-linking": "^6.3.1",
-        "expo-localization": "15.0.3",
-        "expo-navigation-bar": "3.0.7",
-        "expo-secure-store": "13.0.2",
-        "expo-splash-screen": "0.27.5",
-        "expo-status-bar": "1.12.1",
-        "expo-system-ui": "3.0.7",
-        "expo-updates": "^0.25.27",
-        "lottie-react-native": "6.7.2",
+        "expo": "^52.0.4",
+        "expo-av": "^15.0.1",
+        "expo-build-properties": "^0.13.1",
+        "expo-camera": "^16.0.4",
+        "expo-clipboard": "^7.0.0",
+        "expo-crypto": "^14.0.1",
+        "expo-dev-client": "^5.0.1",
+        "expo-haptics": "^14.0.0",
+        "expo-image": "^2.0.0",
+        "expo-image-picker": "^16.0.1",
+        "expo-linear-gradient": "^14.0.1",
+        "expo-linking": "^7.0.2",
+        "expo-localization": "^16.0.0",
+        "expo-navigation-bar": "^4.0.2",
+        "expo-secure-store": "^14.0.0",
+        "expo-splash-screen": "^0.29.7",
+        "expo-status-bar": "^2.0.0",
+        "expo-system-ui": "^4.0.2",
+        "expo-updates": "0.26.6",
+        "lottie-react-native": "^7.1.0",
         "node-libs-browser": "^2.2.1",
         "react": "18.2.0",
         "react-intl": "^6.6.8",
-        "react-native": "0.75.2",
-        "react-native-gesture-handler": "2.18.1",
+        "react-native": "0.76.1",
+        "react-native-gesture-handler": "^2.21.0",
         "react-native-keyboard-aware-scroll-view": "0.9.5",
         "react-native-mmkv": "2.12.2",
         "react-native-reanimated": "3.16.1",
         "react-native-restart": "0.0.27",
-        "react-native-safe-area-context": "4.10.9",
-        "react-native-screens": "3.34.0",
-        "react-native-svg": "15.6.0",
+        "react-native-safe-area-context": "^4.14.0",
+        "react-native-screens": "^4.0.0",
+        "react-native-svg": "^15.9.0",
         "react-redux": "8.0.7",
         "redux-persist": "6.0.0"
     },
@@ -131,9 +131,9 @@
         "babel-plugin-transform-inline-environment-variables": "^0.4.4",
         "babel-plugin-transform-remove-console": "^6.9.4",
         "detox": "^20.25.6",
-        "expo-atlas": "0.3.11",
+        "expo-atlas": "0.3.27",
         "jest": "^29.7.0",
-        "metro": "0.80.11",
+        "metro": "0.81.0",
         "ts-jest": "^29.1.2",
         "typescript": "^5.3.3"
     },

suite-native/app/src/SentryProvider.tsx

@@ -2,7 +2,7 @@ import { useEffect, ReactNode } from 'react';
 import { useSelector } from 'react-redux';
 
 import * as Sentry from '@sentry/react-native';
-import { captureConsoleIntegration } from '@sentry/integrations';
+import { captureConsoleIntegration } from '@sentry/core';
 
 import { selectIsAnalyticsEnabled } from '@suite-common/analytics';
 import { getEnv, isDebugEnv, isDevelopEnv } from '@suite-native/config';

suite-native/app/src/snow/Snow.tsx

@@ -3,7 +3,7 @@ If you found yourself here, congratulations! You have found an easter egg.
 Merry Christmas and Happy New Year!
 */
 import React, { useCallback, useEffect } from 'react';
-import { AppState, Dimensions, StyleSheet, TextStyle, View } from 'react-native';
+import { AppState, Dimensions, StyleSheet, View } from 'react-native';
 
 import { Snowflake } from './Snowflake';
 
@@ -40,9 +40,7 @@ const isChristmas = () => {
     return month === 11 && day > 22 && day < 26;
 };
 
-export const Snow: React.FC<{
-    snowflakesStyle?: TextStyle;
-}> = ({ snowflakesStyle }) => {
+export const Snow: React.FC = () => {
     const [letItSnow, setLetItSnow] = React.useState(false);
 
     const tryToMakeItSnow = useCallback(() => {
@@ -84,7 +82,6 @@ export const Snow: React.FC<{
                         offset={offset}
                         fallDelay={fallDelay}
                         shakeDelay={shakeDelay}
-                        style={snowflakesStyle}
                     />
                 );
             })}