refactor: upgrade to Expo SDK 52

packages/snack-content/src/defaults.ts

@@ -3,5 +3,5 @@ import { SDKVersion } from './types';
 export const defaultSdkVersion: SDKVersion = '51.0.0';
 
 // Mostly used for tests
-export const oldestSdkVersion: SDKVersion = '49.0.0';
-export const newestSdkVersion: SDKVersion = '51.0.0';
+export const oldestSdkVersion: SDKVersion = '50.0.0';
+export const newestSdkVersion: SDKVersion = '52.0.0';

packages/snack-content/src/sdks/index.ts

@@ -7,6 +7,7 @@ const assets = {
 };
 
 const sdks: { [version: string]: SDKSpec } = {
+  // TODO(cedric): drop SDK 48
   '48.0.0': {
     version: '^48.0.0',
     coreModules: {
@@ -148,6 +149,41 @@ const sdks: { [version: string]: SDKSpec } = {
     },
     deprecatedModules: {},
   },
+  '52.0.0': {
+    version: '^52.0.0',
+    coreModules: {
+      ...assets,
+      expo: '~52.0.2',
+      react: '18.3.1',
+      'react-dom': '18.3.1',
+      'react-native': '0.76.1',
+      'react-native-web': '*',
+      // Used by @shopify/react-native-skia, on web only
+      // See runtime/src/NativeModules/ReactNativeSkia.tsx for more info
+      '@shopify/react-native-skia/lib/module/web': '*',
+    },
+    bundledModules: {
+      'expo-asset': '*',
+      'expo-font': '*',
+      'react-native-gesture-handler': '*',
+      'react-native-safe-area-context': '*',
+      '@expo/vector-icons': '*',
+      'expo-constants': '*',
+      'expo-file-system': '*',
+      'expo-updates': '*',
+      '@react-native-async-storage/async-storage': '*',
+      'react-native-reanimated': '*',
+      'expo-router': '*',
+      'expo-router/stack': '*',
+      'expo-router/tabs': '*',
+      'expo-router/drawer': '*',
+      'expo-router/html': '*',
+      'expo-router/head': '*',
+      'expo-router/entry': '*',
+      'react-native-pager-view': '*',
+    },
+    deprecatedModules: {},
+  },
 };
 
 export default sdks;

packages/snack-content/src/sdks/types.ts

@@ -1,7 +1,7 @@
 /**
  * Version of the Expo SDK to use (e.g. "48.0.0").
  */
-export type SDKVersion = '48.0.0' | '49.0.0' | '50.0.0' | '51.0.0';
+export type SDKVersion = '48.0.0' | '49.0.0' | '50.0.0' | '51.0.0' | '52.0.0'; // TODO(cedric): drop SDK 48
 
 /** @internal */
 export type SDKSpec = {

packages/snack-sdk/src/__fixtures__/bundledNativeModules.json

@@ -528,5 +528,112 @@
     "@shopify/react-native-skia": "1.2.3",
     "@shopify/flash-list": "1.6.4",
     "@sentry/react-native": "~5.22.0"
-  }  
+  },
+  "^52.0.0": {
+    "@expo/metro-runtime": "~4.0.0",
+    "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-masked-view/masked-view": "0.3.1",
+    "@react-native-community/netinfo": "11.4.1",
+    "@react-native-community/slider": "4.5.5",
+    "@react-native-community/viewpager": "5.0.11",
+    "@react-native-picker/picker": "2.9.0",
+    "@react-native-segmented-control/segmented-control": "2.5.4",
+    "@stripe/stripe-react-native": "0.38.6",
+    "eslint-config-expo": "~8.0.1",
+    "expo-analytics-amplitude": "~11.3.0",
+    "expo-app-auth": "~11.1.0",
+    "expo-app-loader-provider": "~8.0.0",
+    "expo-apple-authentication": "~7.0.1",
+    "expo-application": "~6.0.1",
+    "expo-asset": "~11.0.1",
+    "expo-audio": "~0.2.3",
+    "expo-auth-session": "~6.0.0",
+    "expo-av": "~15.0.1",
+    "expo-background-fetch": "~13.0.2",
+    "expo-battery": "~9.0.1",
+    "expo-blur": "~14.0.1",
+    "expo-brightness": "~13.0.2",
+    "expo-build-properties": "~0.13.1",
+    "expo-calendar": "~14.0.2",
+    "expo-camera": "~16.0.3",
+    "expo-cellular": "~7.0.1",
+    "expo-checkbox": "~4.0.0",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.2",
+    "expo-contacts": "~14.0.2",
+    "expo-crypto": "~14.0.1",
+    "expo-dev-client": "~5.0.0",
+    "expo-device": "~7.0.1",
+    "expo-document-picker": "~13.0.1",
+    "expo-face-detector": "~13.0.1",
+    "expo-file-system": "~18.0.2",
+    "expo-font": "~13.0.1",
+    "expo-gl": "~15.0.1",
+    "expo-google-app-auth": "~8.3.0",
+    "expo-haptics": "~14.0.0",
+    "expo-image": "~2.0.0",
+    "expo-image-loader": "~5.0.0",
+    "expo-image-manipulator": "~13.0.5",
+    "expo-image-picker": "~16.0.1",
+    "expo-intent-launcher": "~12.0.1",
+    "expo-insights": "~0.8.1",
+    "expo-keep-awake": "~14.0.1",
+    "expo-linear-gradient": "~14.0.1",
+    "expo-linking": "~7.0.2",
+    "expo-local-authentication": "~15.0.1",
+    "expo-localization": "~16.0.0",
+    "expo-location": "~18.0.1",
+    "expo-mail-composer": "~14.0.1",
+    "expo-media-library": "~17.0.2",
+    "expo-module-template": "~10.15.7",
+    "expo-modules-core": "~2.0.0",
+    "expo-navigation-bar": "~4.0.2",
+    "expo-network": "~7.0.0",
+    "expo-notifications": "~0.29.6",
+    "expo-print": "~14.0.2",
+    "expo-router": "~4.0.2",
+    "expo-screen-capture": "~7.0.0",
+    "expo-screen-orientation": "~8.0.0",
+    "expo-secure-store": "~14.0.0",
+    "expo-sensors": "~14.0.1",
+    "expo-sharing": "~13.0.0",
+    "expo-sms": "~13.0.0",
+    "expo-speech": "~13.0.0",
+    "expo-splash-screen": "~0.29.6",
+    "expo-sqlite": "~15.0.2",
+    "expo-status-bar": "~2.0.0",
+    "expo-store-review": "~8.0.0",
+    "expo-symbols": "~0.2.0",
+    "expo-system-ui": "~4.0.2",
+    "expo-task-manager": "~12.0.2",
+    "expo-tracking-transparency": "~5.0.0",
+    "expo-updates": "~0.26.5",
+    "expo-video-thumbnails": "~9.0.0",
+    "expo-video": "~2.0.0",
+    "expo-web-browser": "~14.0.0",
+    "jest-expo": "~52.0.0",
+    "lottie-react-native": "7.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.1",
+    "react-native-web": "~0.19.13",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-get-random-values": "~1.11.0",
+    "react-native-maps": "1.18.0",
+    "react-native-pager-view": "6.4.1",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-screens": "4.0.0",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-svg": "15.8.0",
+    "react-native-view-shot": "~4.0.0",
+    "react-native-webview": "13.12.2",
+    "sentry-expo": "~7.0.0",
+    "unimodules-app-loader": "~5.0.0",
+    "unimodules-image-loader-interface": "~6.1.0",
+    "@shopify/react-native-skia": "1.5.0",
+    "@shopify/flash-list": "1.7.1",
+    "@sentry/react-native": "~6.1.0"
+  }
 }

runtime/package.json

@@ -22,66 +22,66 @@
     "@babel/polyfill": "^7.8.3",
     "@expo/vector-icons": "^14.0.3",
     "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-navigation/drawer": "^6.6.2",
-    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/drawer": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
     "assert": "^2.1.0",
     "await-lock": "^2.2.2",
     "canvaskit-wasm": "0.38.0",
     "diff": "^5.0.0",
     "escape-string-regexp": "^5.0.0",
-    "expo": "~51.0.31",
-    "expo-asset": "~10.0.10",
-    "expo-barcode-scanner": "~13.0.1",
-    "expo-constants": "~16.0.2",
-    "expo-file-system": "~17.0.1",
-    "expo-font": "~12.0.10",
-    "expo-keep-awake": "~13.0.2",
-    "expo-linking": "~6.3.1",
-    "expo-random": "~14.0.1",
-    "expo-router": "~3.5.23",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "expo-updates": "~0.25.24",
+    "expo": "~52.0.2",
+    "expo-asset": "~11.0.1",
+    "expo-camera": "~16.0.3",
+    "expo-constants": "~17.0.2",
+    "expo-crypto": "~14.0.1",
+    "expo-file-system": "~18.0.2",
+    "expo-font": "~13.0.1",
+    "expo-keep-awake": "~14.0.1",
+    "expo-linking": "~7.0.2",
+    "expo-router": "~4.0.2",
+    "expo-splash-screen": "~0.29.6",
+    "expo-status-bar": "~2.0.0",
+    "expo-updates": "~0.26.5",
     "path": "^0.12.7",
     "prop-types": "^15.7.2",
     "pubnub": "^7.2.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-pager-view": "6.3.0",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-view-shot": "3.8.0",
-    "react-native-web": "~0.19.6",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.1",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-pager-view": "6.4.1",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "^4.0.0",
+    "react-native-view-shot": "~4.0.0",
+    "react-native-web": "~0.19.13",
     "snack-babel-standalone": "file:../packages/snack-babel-standalone",
     "snack-content": "file:../packages/snack-content",
     "snack-require-context": "file:../packages/snack-require-context",
     "socket.io-client": "~4.5.4",
     "source-map": "0.6.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.25.2",
     "@expo/spawn-async": "^1.7.2",
     "@types/diff": "^5.0.0",
     "@types/jest": "^26.0.24",
     "@types/pubnub": "^7.2.0",
-    "@types/react": "~18.2.79",
-    "@types/react-dom": "~18.2.25",
-    "@types/react-native": "~0.70.6",
-    "babel-preset-expo": "~11.0.0",
+    "@types/react": "~18.3.12",
+    "@types/react-dom": "~18.3.1",
+    "babel-preset-expo": "~12.0.0-preview",
     "eslint": "^8.56.0",
     "eslint-config-universe": "^13.0.0",
     "getenv": "^1.0.0",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.4",
+    "jest-expo": "~52.0.0-preview.2",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.2.4",
     "s3-deploy": "^1.4.0",
     "semver": "^7.5.1",
-    "typescript": "~5.3.3"
+    "typescript": "~5.3.3",
+    "update-browserslist-db": "^1.1.1"
   },
   "eslintConfig": {
     "extends": "universe/native",

runtime/src/App.tsx

@@ -13,7 +13,7 @@ import {
   EmitterSubscription,
   NativeEventSubscription,
 } from 'react-native';
-import { parseRuntimeUrl } from 'snack-content';
+import { parseRuntimeUrl } from 'snack-content/build/urls'; // NOTE(cedric): this is a workaround as 'snack-content/build/sdk' causes Hermes syntax crashes
 import { createVirtualModulePath } from 'snack-require-context';
 
 import { AppLoading } from './AppLoading';

runtime/src/BarCodeScannerView.native.tsx

@@ -1,12 +1,12 @@
-import { BarCodeScanner, BarCodeScannedCallback } from 'expo-barcode-scanner';
+import { Camera, CameraView, type CameraViewProps } from 'expo-camera';
 import Constants from 'expo-constants';
 import * as React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 
 import LoadingView from './LoadingView';
 
 type Props = {
-  onBarCodeScanned: BarCodeScannedCallback;
+  onBarCodeScanned: CameraViewProps['onBarcodeScanned'];
   initialURL: string;
 };
 
@@ -26,7 +26,7 @@ export default class BarCodeScannerView extends React.Component<Props, State> {
   }
 
   _openCameraAsync = async () => {
-    const { status } = await BarCodeScanner.requestPermissionsAsync();
+    const { status } = await Camera.requestCameraPermissionsAsync();
 
     this.setState({
       waitingForPermission: false,
@@ -53,7 +53,7 @@ export default class BarCodeScannerView extends React.Component<Props, State> {
             Make sure to leave the web page open while you are running the project.
           </Text>
           {/* @ts-ignore Property 'style' does not exist on type */}
-          <BarCodeScanner style={styles.camera} onBarCodeScanned={onBarCodeScanned} />
+          <CameraView style={styles.camera} onBarCodeScanned={onBarCodeScanned} />
         </View>
       );
     }

runtime/src/BarCodeScannerView.tsx

@@ -1,10 +1,10 @@
-import type { BarCodeEvent } from 'expo-barcode-scanner';
+import type { BarcodeScanningResult } from 'expo-camera';
 import Constants from 'expo-constants';
 import * as React from 'react';
 import { View, TextInput, StyleSheet } from 'react-native';
 
 type Props = {
-  onBarCodeScanned: (event: Pick<BarCodeEvent, 'type' | 'data'>) => any;
+  onBarCodeScanned: (event: Pick<BarcodeScanningResult, 'type' | 'data'>) => any;
   initialURL: string;
 };
 

runtime/src/Modules.tsx

@@ -23,7 +23,7 @@ import { SourceMapConsumer, RawSourceMap } from 'source-map';
 import { SNACKAGER_API_URLS } from './Constants';
 import * as Files from './Files';
 import * as Logger from './Logger';
-import AssetRegistry from './NativeModules/AssetRegistry';
+import * as AssetRegistry from './NativeModules/AssetRegistry';
 import FileSystem from './NativeModules/FileSystem';
 import * as Profiling from './Profiling';
 import aliases from './aliases';
@@ -69,7 +69,10 @@ GestureHandler; // eslint-disable-line no-unused-expressions,@typescript-eslint/
 // That's not available inside the Snack Runtime itself.
 // see: https://twitter.com/jamonholmgren/status/1561798978269618177
 // @ts-expect-error
-global['__DEV__'] = false;
+if (typeof global['__DEV__'] !== 'boolean') {
+  // @ts-expect-error
+  global['__DEV__'] = false;
+}
 
 // Maintain project-level dependency state in the `ExpoDependencyV2` format.
 // See https://github.com/expo/universe/blob/64a2eab474d11614c5b403f09747fdb112769a39/libraries/snack-sdk/src/types.js#L114-L126.

runtime/src/NativeModules/AssetRegistry.tsx

@@ -1,19 +1,6 @@
-// @ts-ignore
-import * as AssetRegistry from 'react-native-web/dist/modules/AssetRegistry';
-
-export type PackagerAsset = {
-  hash: string;
-  name: string;
-  scales: number[];
-  fileHashes: string[];
-  httpServerLocation: string;
-  uri: string;
-  width?: number;
-  height?: number;
-  type?: string;
-};
-
-export default AssetRegistry as {
-  registerAsset(asset: PackagerAsset): number;
-  getAssetByID(assetID: number): PackagerAsset | undefined;
-};
+export {
+  type AssetDestPathResolver,
+  type PackagerAsset,
+  registerAsset,
+  getAssetByID,
+} from '@react-native/assets-registry/registry';

runtime/src/NativeModules/getDeviceIdAsync.tsx

@@ -1,10 +1,10 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import * as Random from 'expo-random';
+import { getRandomBytesAsync } from 'expo-crypto';
 
 export default async function getDeviceIdAsync() {
   const value = await AsyncStorage.getItem('SnackDeviceId');
   if (value) return value;
-  const byteArray = await Random.getRandomBytesAsync(16);
+  const byteArray = await getRandomBytesAsync(16);
   const hexString = [...new Uint8Array(byteArray.buffer)]
     .map((x) => x.toString(16).padStart(2, '0'))
     .join('');