feat: upgrade Snack to SDK 56 beta

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

@@ -218,6 +218,41 @@ const sdks: { [version: string]: SDKSpec } = {
     },
     deprecatedModules: {},
   },
+  '56.0.0': {
+    version: '^56.0.0',
+    coreModules: {
+      ...assets,
+      expo: '56.0.0-preview.7', // TODO: replace with `~56.0.x` when stable is out
+      react: '19.2.3',
+      'react-dom': '19.2.3',
+      'react-native': '0.85.3',
+      '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. "53.0.0").
  */
-export type SDKVersion = '50.0.0' | '51.0.0' | '52.0.0' | '53.0.0' | '54.0.0' | '55.0.0';
+export type SDKVersion = '50.0.0' | '51.0.0' | '52.0.0' | '53.0.0' | '54.0.0' | '55.0.0' | '56.0.0';
 
 /** @internal */
 export type SDKSpec = {

packages/snack-runtime/package.json

@@ -23,6 +23,7 @@
     "node": "22.21.1"
   },
   "scripts": {
+    "postinstall": "patch-package",
     "test": "jest",
     "lint": "eslint .",
     "build": "echo 'This package ships TypeScript for Metro to compile.'"
@@ -42,47 +43,49 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@react-native/jest-preset": "^0.85.3",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^13.2.0",
-    "babel-preset-expo": "~55.0.0",
+    "babel-preset-expo": "~56.0.0",
     "eslint": "^8.56.0",
     "eslint-config-universe": "^15.0.3",
-    "expo": "^55.0.2",
-    "expo-asset": "~55.0.0",
-    "expo-camera": "~55.0.0",
-    "expo-constants": "~55.0.0",
-    "expo-crypto": "~55.0.0",
-    "expo-device": "~55.0.0",
-    "expo-file-system": "~55.0.0",
-    "expo-haptics": "~55.0.0",
-    "expo-keep-awake": "~55.0.0",
-    "expo-splash-screen": "~55.0.0",
-    "expo-status-bar": "~55.0.0",
+    "expo": "^56.0.0-preview.7",
+    "expo-asset": "~56.0.0",
+    "expo-camera": "~56.0.0",
+    "expo-constants": "~56.0.0",
+    "expo-crypto": "~56.0.0",
+    "expo-device": "~56.0.0",
+    "expo-file-system": "~56.0.0",
+    "expo-haptics": "~56.0.0",
+    "expo-keep-awake": "~56.0.0",
+    "expo-splash-screen": "~56.0.0",
+    "expo-status-bar": "~56.0.0",
     "jest": "^29.2.1",
-    "jest-expo": "~55.0.0",
+    "jest-expo": "~56.0.0",
+    "patch-package": "^8.0.1",
     "prettier": "^3.2.4",
-    "react": "19.2.0",
-    "react-native": "0.83.2",
-    "react-native-gesture-handler": "~2.30.0",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "~2.31.1",
     "react-native-view-shot": "~4.0.3",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "assert": "^2.1.0",
-    "expo": "~55.0.0",
-    "expo-asset": "~55.0.0",
-    "expo-camera": "~55.0.0",
-    "expo-constants": "~55.0.0",
-    "expo-crypto": "~55.0.0",
-    "expo-device": "~55.0.0",
-    "expo-file-system": "~55.0.0",
-    "expo-haptics": "~55.0.0",
-    "expo-keep-awake": "~55.0.0",
-    "expo-splash-screen": "~55.0.0",
-    "expo-status-bar": "~55.0.0",
-    "react": "19.2.0",
-    "react-native": "~0.83.0",
-    "react-native-gesture-handler": "~2.30.0",
+    "expo": "~56.0.0",
+    "expo-asset": "~56.0.0",
+    "expo-camera": "~56.0.0",
+    "expo-constants": "~56.0.0",
+    "expo-crypto": "~56.0.0",
+    "expo-device": "~56.0.0",
+    "expo-file-system": "~56.0.0",
+    "expo-haptics": "~56.0.0",
+    "expo-keep-awake": "~56.0.0",
+    "expo-splash-screen": "~56.0.0",
+    "expo-status-bar": "~56.0.0",
+    "react": "19.2.3",
+    "react-native": "~0.85.0",
+    "react-native-gesture-handler": "~2.31.1",
     "react-native-view-shot": "~4.0.0"
   },
   "eslintConfig": {

packages/snack-runtime/patches/jest-expo+56.0.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/jest-expo/jest-preset.js b/node_modules/jest-expo/jest-preset.js
+index adf0f36..4a0b097 100644
+--- a/node_modules/jest-expo/jest-preset.js
++++ b/node_modules/jest-expo/jest-preset.js
+@@ -3,7 +3,7 @@
+ const cloneDeep = require('lodash/cloneDeep');
+ const isEqual = require('lodash/isEqual');
+ // Derive the Expo Jest preset from the React Native one
+-const jestPreset = cloneDeep(require('react-native/jest-preset'));
++const jestPreset = cloneDeep(require('@react-native/jest-preset'));
+
+ const { withTypescriptMapping } = require('./src/preset/withTypescriptMapping');
+ const { resolveBabelConfig } = require('./src/resolveBabelConfig');

packages/snack-runtime/src/App.tsx

@@ -93,6 +93,7 @@ function notifyStateChange(props: Pick<Props, 'onSnackState'>, state: SnackState
 // updates and displays the Snack.
 export default class App extends React.Component<Props, State> {
   static contextType = SnackRuntimeContext;
+  declare context: React.ContextType<typeof SnackRuntimeContext>;
 
   state: State = {
     initialLoad: true,
@@ -623,7 +624,10 @@ export default class App extends React.Component<Props, State> {
     return (
       <>
         <StatusBar style="dark" />
-        <Errors.ErrorBoundary ref={(view) => (this._view = view)}>
+        <Errors.ErrorBoundary
+          ref={(view) => {
+            this._view = view;
+          }}>
           {rootElement ?? loadingElement}
         </Errors.ErrorBoundary>
         <UpdateIndicator

packages/snack-runtime/src/LoadingView.tsx

@@ -44,7 +44,7 @@ export default class LoadingView extends React.PureComponent<Props, State> {
       <View style={styles.container}>
         <Animated.Image
           style={{
-            ...StyleSheet.absoluteFillObject,
+            ...StyleSheet.absoluteFill,
             width: '100%',
             height: '100%',
             opacity: opacity.interpolate({

packages/snack-runtime/src/LoadingView.web.tsx

@@ -19,6 +19,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  // CSS animation properties below are react-native-web-only; not in RN's ViewStyle types.
   image: {
     width: 100,
     height: 100,
@@ -36,5 +37,5 @@ const styles = StyleSheet.create({
         '100%': { opacity: 0.1 },
       },
     ],
-  },
+  } as any,
 });

packages/snack-runtime/src/NativeModules/LogBox.web.tsx

@@ -1,7 +1,7 @@
-import { YellowBox } from 'react-native';
+import { LogBox } from 'react-native';
 
 export default {
   ignoreLogs(logs: string[]) {
-    YellowBox.ignoreWarnings(logs);
+    LogBox.ignoreLogs(logs);
   },
 };

packages/snack-runtime/src/UpdateIndicator.web.tsx

@@ -34,7 +34,7 @@ export default function UpdateIndicator(props: Props) {
 
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     overflow: 'hidden',
   },
   notification: {

packages/snack-runtime/src/config/__tests__/SnackConfig.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
-import { useContext } from 'react';
+import { useContext, type ReactNode } from 'react';
 import { Text } from 'react-native';
 
 import { SnackConfig, SnackRuntimeContext, SnackRuntimeProvider } from '../SnackConfig';
@@ -14,9 +14,9 @@ describe(SnackRuntimeProvider, () => {
   it('provides the config context', () => {
     const { result } = renderHook(useContext, {
       initialProps: SnackRuntimeContext,
-      wrapper: ({ children }) => (
+      wrapper: (({ children }: { children?: ReactNode }) => (
         <SnackRuntimeProvider config={config}>{children}</SnackRuntimeProvider>
-      ),
+      )) as any,
     });
 
     expect(result.current).toBe(config);

packages/snack-runtime/src/config/modules/common.tsx

@@ -1,4 +1,4 @@
-import AssetRegistry from '../../NativeModules/AssetRegistry';
+import * as AssetRegistry from '../../NativeModules/AssetRegistry';
 import * as SkiaWeb from '../../NativeModules/ReactNativeSkia';
 import { SnackConfig } from '../SnackConfig';
 

packages/snack-runtime/src/config/modules/index.tsx

@@ -1,5 +1,5 @@
 import { allPlatformModules } from './common';
-import AssetRegistry from '../../NativeModules/AssetRegistry';
+import * as AssetRegistry from '../../NativeModules/AssetRegistry';
 import { SnackConfig } from '../SnackConfig';
 
 export const modules: SnackConfig['modules'] = {

packages/snack-runtime/src/config/modules/index.web.tsx

@@ -1,5 +1,5 @@
 import { allPlatformModules } from './common';
-import AssetRegistry from '../../NativeModules/AssetRegistry';
+import * as AssetRegistry from '../../NativeModules/AssetRegistry';
 import { SnackConfig } from '../SnackConfig';
 
 export const modules: SnackConfig['modules'] = {

packages/snack-runtime/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-
+    "types": ["jest", "node"]
   },
   "include": ["src/**/*"]
 }