refactor: upgrade to Expo SDK 52

packages/snack-babel-standalone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snack-babel-standalone",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Babel for Snack Runtime and Website",
   "main": "./build/runtime.js",
   "types": "./types/runtime.d.ts",
@@ -57,12 +57,17 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-arrow-functions": "^7.23.3",
     "@babel/plugin-transform-async-to-generator": "^7.23.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-classes": "^7.25.9",
     "@babel/plugin-transform-export-namespace-from": "^7.23.4",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.25.9",
+    "@babel/plugin-transform-optional-chaining": "^7.25.9",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/plugin-transform-shorthand-properties": "^7.23.3",
     "@babel/plugin-transform-template-literals": "^7.23.3",
+    "@babel/plugin-transform-unicode-regex": "^7.25.9",
     "@babel/preset-typescript": "^7.23.3",
-    "@react-native/babel-preset": "^0.73.19",
+    "@react-native/babel-preset": "^0.75.4",
     "@tsconfig/node16": "^1.0.3",
     "babel-loader": "^8.2.5",
     "node-polyfill-webpack-plugin": "^2.0.0",

packages/snack-babel-standalone/src/bundled.ts

@@ -15,6 +15,12 @@ registerPlugins({
   '@babel/plugin-proposal-optional-chaining': require('@babel/plugin-proposal-optional-chaining').default,
   '@babel/plugin-proposal-nullish-coalescing-operator': require('@babel/plugin-proposal-nullish-coalescing-operator').default,
   '@babel/plugin-transform-template-literals': require('@babel/plugin-transform-template-literals').default,
+  // Required for the Reanimated +3.16.x plugin
+  '@babel/plugin-transform-optional-chaining': require('@babel/plugin-transform-optional-chaining').default,
+  '@babel/plugin-transform-nullish-coalescing-operator': require('@babel/plugin-transform-nullish-coalescing-operator').default,
+  '@babel/plugin-transform-class-properties': require('@babel/plugin-transform-class-properties'),
+  '@babel/plugin-transform-classes': require('@babel/plugin-transform-classes'),
+  '@babel/plugin-transform-unicode-regex': require('@babel/plugin-transform-unicode-regex'),
 });
 
 registerPresets({

packages/snack-content/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snack-content",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Functions and types that describe the contents of Snack projects",
   "main": "build/index.js",
   "types": "build/index.d.ts",

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-runtime/package.json

@@ -37,7 +37,7 @@
     "path": "^0.12.7",
     "pubnub": "^7.2.0",
     "snack-babel-standalone": "^4.0.0",
-    "snack-content": "~3.2.0",
+    "snack-content": "~3.3.0",
     "snack-require-context": "^0.1.0",
     "socket.io-client": "~4.5.4",
     "source-map": "0.6.1"

packages/snack-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snack-sdk",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "The Expo Snack SDK",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -71,7 +71,7 @@
     "nullthrows": "^1.1.1",
     "pubnub": "^7.2.0",
     "semver": "^7.3.4",
-    "snack-content": "~3.2.0",
+    "snack-content": "~3.3.0",
     "socket.io-client": "~4.5.4",
     "ua-parser-js": "^0.7.22",
     "validate-npm-package-name": "^3.0.0"

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,67 @@
     "@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/jest": "^29.5.14",
     "@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",
     "eslint": "^8.56.0",
-    "eslint-config-universe": "^13.0.0",
+    "eslint-config-universe": "^14.0.0",
+    "expo-atlas": "^0.3.27",
     "getenv": "^1.0.0",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.4",
+    "jest-expo": "~52.0.0",
     "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>
       );
     }