chore(e2e): Update Expo sample to SDK 56

samples/expo/app/(tabs)/_layout.tsx

@@ -1,32 +1,33 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { Link, Tabs } from 'expo-router';
 import React from 'react';
-import { Pressable } from 'react-native';
+import { type ColorValue, Pressable, Text } from 'react-native';
 
 import { useClientOnlyValue } from '@/components/useClientOnlyValue';
 import { useColorScheme } from '@/components/useColorScheme';
 import Colors from '@/constants/Colors';
 
-// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
-function TabBarIcon(props: { name: React.ComponentProps<typeof FontAwesome>['name']; color: string }) {
-  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
+function TabBarIcon({ label, color }: { label: string; color: ColorValue }) {
+  return <Text style={{ fontSize: 20, marginBottom: -3, color }}>{label}</Text>;
 }
 
-function CodeIcon({ color }: { color: string }) {
-  return <TabBarIcon name="code" color={color} />;
+function CodeIcon({ color }: { color: ColorValue }) {
+  return <TabBarIcon label="⌘" color={color} />;
 }
 
-function InfoButton({ colorScheme }: { colorScheme: 'light' | 'dark' | null }) {
+function InfoButton({ colorScheme }: { colorScheme: string }) {
   return (
     <Link href="/modal" asChild>
       <Pressable>
         {({ pressed }) => (
-          <FontAwesome
-            name="info-circle"
-            size={25}
-            color={Colors[colorScheme ?? 'light'].text}
-            style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
-          />
+          <Text
+            style={{
+              fontSize: 20,
+              color: Colors[colorScheme === 'dark' ? 'dark' : 'light'].text,
+              marginRight: 15,
+              opacity: pressed ? 0.5 : 1,
+            }}>
+            ⓘ
+          </Text>
         )}
       </Pressable>
     </Link>
@@ -36,12 +37,13 @@ function InfoButton({ colorScheme }: { colorScheme: 'light' | 'dark' | null }) {
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
-  const renderInfoButton = React.useCallback(() => <InfoButton colorScheme={colorScheme} />, [colorScheme]);
+  const theme = colorScheme === 'dark' ? 'dark' : 'light';
+  const renderInfoButton = React.useCallback(() => <InfoButton colorScheme={theme} />, [theme]);
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: Colors[theme].tint,
         // Disable the static render of the header on web
         // to prevent a hydration error in React Navigation v6.
         headerShown: useClientOnlyValue(false, true),

samples/expo/app/(tabs)/index.tsx

@@ -16,7 +16,8 @@ export default function TabOneScreen() {
   const { currentlyRunning } = useUpdates();
   const rawRouter = useRouter();
   // Wrap the router to monitor prefetch performance
-  const router = Sentry.wrapExpoRouter(rawRouter);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const router = Sentry.wrapExpoRouter(rawRouter as any);
 
   return (
     <ScrollView>
@@ -32,7 +33,7 @@ export default function TabOneScreen() {
           <Button
             title="Open DevMenu"
             onPress={() => {
-              DevClient.openMenu();
+              DevClient.openMenu?.();
             }}
             disabled={isWeb()}
           />

samples/expo/app/_layout.tsx

@@ -1,8 +1,6 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router/react-navigation';
 import * as Sentry from '@sentry/react-native';
 import { isRunningInExpoGo } from 'expo';
-import { useFonts } from 'expo-font';
 import * as ImagePicker from 'expo-image-picker';
 import { SplashScreen, Stack } from 'expo-router';
 import { useEffect } from 'react';
@@ -73,7 +71,8 @@ Sentry.init({
       Sentry.feedbackIntegration({
         enableScreenshot: true,
         enableTakeScreenshot: true,
-        imagePicker: ImagePicker,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        imagePicker: ImagePicker as any,
         buttonOptions: {
           styles: {
             triggerButton: {
@@ -108,27 +107,9 @@ Sentry.init({
 });
 
 function RootLayout() {
-  const [loaded, error] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
-    ...FontAwesome.font,
-  });
-
-  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
-  useEffect(() => {
-    if (error) {
-      throw error;
-    }
-  }, [error]);
-
   useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  if (!loaded) {
-    return null;
-  }
+    SplashScreen.hideAsync();
+  }, []);
 
   return <RootLayoutNav />;
 }

samples/expo/components/StyledText.tsx

@@ -8,6 +8,6 @@ export function MonoText(props: TextProps) {
 
 const styles = StyleSheet.create({
   monoText: {
-    fontFamily: 'SpaceMono',
+    fontFamily: 'monospace',
   },
 });

samples/expo/components/Themed.tsx

@@ -21,7 +21,8 @@ export function useThemeColor(
   props: { light?: string; dark?: string },
   colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
 ) {
-  const theme = useColorScheme() ?? 'light';
+  const rawTheme = useColorScheme();
+  const theme = rawTheme === 'dark' ? 'dark' : 'light';
   const colorFromProps = props[theme];
 
   if (colorFromProps) {

samples/expo/package.json

@@ -26,23 +26,23 @@
     "@sentry/core": "10.53.1",
     "@sentry/react-native": "8.12.0",
     "@types/react": "~19.2.10",
-    "expo": "^55.0.0",
-    "expo-constants": "~55.0.7",
-    "expo-dev-client": "~55.0.11",
-    "expo-image-picker": "~55.0.11",
-    "expo-linking": "~55.0.7",
-    "expo-router": "~55.0.4",
-    "expo-status-bar": "~55.0.4",
-    "expo-updates": "~55.0.12",
-    "expo-web-browser": "~55.0.9",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "react-native": "0.83.2",
-    "react-native-gesture-handler": "~2.30.0",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.23.0",
+    "expo": "^56.0.0",
+    "expo-constants": "~56.0.15",
+    "expo-dev-client": "~56.0.15",
+    "expo-image-picker": "~56.0.13",
+    "expo-linking": "~56.0.11",
+    "expo-router": "~56.2.6",
+    "expo-status-bar": "~56.0.4",
+    "expo-updates": "~56.0.16",
+    "expo-web-browser": "~56.0.5",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "~2.31.2",
+    "react-native-safe-area-context": "~5.8.0",
+    "react-native-screens": "~4.25.2",
     "react-native-web": "^0.21.0",
-    "typescript": "~5.9.2"
+    "typescript": "~6.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -51,12 +51,6 @@
     "@types/node": "20.10.4",
     "sentry-react-native-samples-utils": "workspace:^"
   },
-  "overrides": {
-    "react-refresh": "~0.14.0"
-  },
-  "resolutions": {
-    "react-refresh": "~0.14.0"
-  },
   "expo": {
     "install": {
       "exclude": [

samples/expo/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     "skipLibCheck": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }