feat(example): update with-react-native-web, Expo SDK 51 & Expo Router (File-based routing)

examples/with-react-native-web/apps/native/app.json

@@ -3,6 +3,7 @@
     "name": "native",
     "slug": "native",
     "version": "1.0.0",
+    "scheme": "com.turbo.example",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -14,18 +15,25 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
-      }
+      },
+      "package": "com.turbo.example"
     },
     "web": {
-      "favicon": "./assets/favicon.png"
-    }
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    },
+    "plugins": [
+      "expo-router"
+    ]
   }
 }

examples/with-react-native-web/apps/native/app/_layout.tsx

@@ -0,0 +1,7 @@
+import { Stack } from "expo-router"
+
+const AppLayout = () => {
+  return <Stack />
+}
+
+export default AppLayout

examples/with-react-native-web/apps/native/index.js

@@ -1,8 +1 @@
-import { registerRootComponent } from "expo";
-
-import App from "./App";
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in Expo Go or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);
+import "expo-router/entry"

examples/with-react-native-web/apps/native/package.json

@@ -12,18 +12,24 @@
   },
   "dependencies": {
     "@repo/ui": "*",
-    "expo": "^49.0.21",
-    "expo-status-bar": "~1.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "0.73.1",
-    "react-native-web": "^0.19.10"
+    "expo": "~51.0.39",
+    "expo-constants": "~16.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-router": "~3.5.24",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "~3.0.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@expo/webpack-config": "^19.0.0",
-    "@types/react": "^18.2.46",
+    "@types/react": "~18.2.14",
     "@types/react-native": "^0.73.0",
-    "typescript": "5.5.4"
+    "typescript": "~5.3.3"
   }
 }

examples/with-react-native-web/apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/with-react-native-web/apps/web/package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "@repo/typescript-config": "*",
     "@types/node": "^20.10.6",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.18",
     "babel-plugin-react-native-web": "^0.19.10",
     "eslint": "^8.56.0",

examples/with-react-native-web/packages/ui/package.json

@@ -10,13 +10,13 @@
   },
   "devDependencies": {
     "@repo/typescript-config": "*",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.14",
     "@types/react-native": "^0.73.0",
     "tsup": "^8.0.1",
     "typescript": "5.5.4"
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-native": "^0.73.1"
+    "react-native": "0.74.5"
   }
 }

examples/with-react-native-web/packages/ui/src/button.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import {
-  TouchableOpacity,
   StyleSheet,
   GestureResponderEvent,
   Text,
+  Pressable,
 } from "react-native";
 
 export interface ButtonProps {
@@ -13,9 +13,9 @@ export interface ButtonProps {
 
 export function Button({ text, onClick }: ButtonProps) {
   return (
-    <TouchableOpacity style={styles.button} onPress={onClick}>
+    <Pressable style={styles.button} onPress={onClick}>
       <Text style={styles.text}>{text}</Text>
-    </TouchableOpacity>
+    </Pressable>
   );
 }