feat: Expo managed workflow (expo-dev-client) support for iOS

apps/expo-demo/.gitignore

@@ -0,0 +1,2 @@
+ios/
+android/

apps/expo-demo/App.tsx

@@ -0,0 +1,71 @@
+import SandboxReactNativeView from '@callstack/react-native-sandbox'
+import React, {useState} from 'react'
+import {SafeAreaView, StyleSheet, Text, View} from 'react-native'
+
+import CrashIfYouCanDemo from './CrashIfYouCanDemo'
+
+const DemoApp: React.FC = () => {
+  const [lastError, setLastError] = useState<string | null>(null)
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.container}>
+        <View style={styles.column}>
+          <Text style={styles.header}>Main App</Text>
+          <CrashIfYouCanDemo />
+        </View>
+        <View style={[styles.column, styles.columnSandbox]}>
+          <Text style={styles.header}>Sandboxed</Text>
+          {lastError && <Text style={styles.errorText}>{lastError}</Text>}
+          <SandboxReactNativeView
+            style={styles.sandboxView}
+            jsBundleSource={'sandbox'}
+            componentName={'SandboxedDemo'}
+            onError={error => {
+              const message = `${error.isFatal ? '[fatal]' : '[warn]'} ${error.name}: ${error.message}`
+              console.warn('Sandbox error:', message)
+              setLastError(message)
+              return false
+            }}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    padding: 16,
+  },
+  columnSandbox: {
+    borderWidth: 1,
+    borderColor: '#8232ff',
+    borderRadius: 4,
+  },
+  column: {
+    flex: 1,
+    padding: 8,
+  },
+  header: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  sandboxView: {
+    flex: 1,
+  },
+  errorText: {
+    color: 'red',
+    fontSize: 11,
+    marginBottom: 4,
+  },
+})
+
+export default DemoApp

apps/expo-demo/CrashIfYouCanDemo.tsx

@@ -0,0 +1,69 @@
+import React, {useState} from 'react'
+import {
+  Button,
+  LogBox,
+  NativeModules,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native'
+
+export default function CrashIfYouCanDemo() {
+  const [counter, setCounter] = useState(0)
+
+  const triggerCrash = () => {
+    // @ts-ignore
+    global.nonExistentMethod() // Should crash the app
+  }
+
+  const overwriteGlobal = () => {
+    // Overwrite console.log to something harmful
+    console.log = () => {
+      throw new Error('console.log has been hijacked!')
+    }
+    console.log('This will now throw') // This will crash or break logs
+  }
+
+  const accessBlockedTurboModule = () => {
+    const FileReaderModule = NativeModules.FileReaderModule
+    FileReaderModule.readAsText('/some/file.txt')
+      .then((text: string) => console.log(text))
+      .catch((err: any) => console.log(err.message))
+  }
+
+  // Hangs the sandbox JS thread only — the host app stays responsive because
+  // each sandbox runs in its own Hermes instance and JS thread.
+  const infiniteLoop = () => {
+    while (true) {}
+  }
+
+  const incrementCounter = () => {
+    setCounter(counter + 1)
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Button title="1. Crash App (undefined global)" onPress={triggerCrash} />
+      <View style={styles.spacer} />
+      <Button title="2. Overwrite Global (console.log)" onPress={overwriteGlobal} />
+      <View style={styles.spacer} />
+      <Button title="3. Access Blocked TurboModule" onPress={accessBlockedTurboModule} />
+      <View style={styles.spacer} />
+      <Button title="4. Infinite Loop" onPress={infiniteLoop} />
+      <View style={styles.spacer} />
+      <Button title={`Increment ${counter}`} onPress={incrementCounter} />
+    </ScrollView>
+  )
+}
+
+LogBox.ignoreAllLogs()
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    justifyContent: 'center',
+  },
+  spacer: {
+    height: 16,
+  },
+})

apps/expo-demo/app.json

@@ -0,0 +1,17 @@
+{
+  "expo": {
+    "name": "expo-demo",
+    "slug": "expo-demo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "newArchEnabled": true,
+    "ios": {
+      "bundleIdentifier": "com.callstack.expodemo",
+      "supportsTablet": true
+    },
+    "android": {
+      "package": "com.callstack.expodemo"
+    },
+    "plugins": ["expo-dev-client"]
+  }
+}

apps/expo-demo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo'],
+  }
+}

apps/expo-demo/index.js

@@ -0,0 +1,4 @@
+import {registerRootComponent} from 'expo'
+import App from './App'
+
+registerRootComponent(App)

apps/expo-demo/metro.config.js

@@ -0,0 +1,31 @@
+const {getDefaultConfig} = require('expo/metro-config')
+const path = require('path')
+
+const projectRoot = __dirname
+const workspaceRoot = path.resolve(projectRoot, '../..')
+
+const config = getDefaultConfig(projectRoot)
+
+// Monorepo: watch workspace root so Metro can resolve packages/react-native-sandbox
+config.watchFolders = [workspaceRoot]
+
+// Resolution order: app-local first, then workspace root.
+// disableHierarchicalLookup prevents accidentally climbing up beyond workspaceRoot.
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
+]
+config.resolver.disableHierarchicalLookup = true
+
+// Pin react and react-native to specific node_modules to avoid version
+// mismatch when the workspace root has a different RN version (e.g. apps/demo
+// uses 0.80.1 while we use 0.81.4).
+// react is pinned to workspaceRoot because bun may hoist an older transitive
+// version into apps/expo-demo/node_modules when deduplicating workspace deps.
+config.resolver.extraNodeModules = {
+  react: path.resolve(workspaceRoot, 'node_modules/react'),
+  'react-native': path.resolve(projectRoot, 'node_modules/react-native'),
+  'react-dom': path.resolve(projectRoot, 'node_modules/react-dom'),
+}
+
+module.exports = config

apps/expo-demo/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@apps/expo-demo",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild --clean",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@callstack/react-native-sandbox": "workspace:*",
+    "expo": "~54.0.17",
+    "expo-dev-client": "~6.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/react": "~19.0.0",
+    "babel-preset-expo": "~14.0.0",
+    "typescript": "~5.3.3"
+  }
+}

apps/expo-demo/sandbox.js

@@ -0,0 +1,7 @@
+import {AppRegistry, LogBox} from 'react-native'
+
+import CrashIfYouCanDemo from './CrashIfYouCanDemo'
+
+LogBox.uninstall()
+
+AppRegistry.registerComponent('SandboxedDemo', () => CrashIfYouCanDemo)

apps/expo-demo/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}