chore(deps)!: use non-legacy Expo FS in Resource Fetcher, bump SDK version to 56 in demo apps

apps/computer-vision/ScreenWrapper.tsx

@@ -1,4 +1,4 @@
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from 'expo-router';
 import { PropsWithChildren } from 'react';
 
 export default function ScreenWrapper({ children }: PropsWithChildren) {

apps/computer-vision/app/_layout.tsx

@@ -4,14 +4,20 @@ import { ExpoResourceFetcher } from 'react-native-executorch-expo-resource-fetch
 
 import ColorPalette from '../colors';
 import React, { useState } from 'react';
-import { Text, StyleSheet, View, TouchableOpacity } from 'react-native';
+import {
+  Text,
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  type ColorValue,
+} from 'react-native';
 
 import {
-  DrawerContentComponentProps,
+  type DrawerContentComponentProps,
   DrawerContentScrollView,
   DrawerItemList,
-} from '@react-navigation/drawer';
-import { DrawerActions } from '@react-navigation/native';
+} from 'expo-router/build/react-navigation/drawer';
+import { DrawerActions } from 'expo-router/build/react-navigation/routers';
 import { useNavigation } from 'expo-router';
 import Svg, { Rect } from 'react-native-svg';
 import { GeneratingContext } from '../context';
@@ -20,38 +26,18 @@ initExecutorch({
   resourceFetcher: ExpoResourceFetcher,
 });
 
-function HamburgerIcon({ tintColor }: { tintColor?: string }) {
+function HamburgerIcon({ tintColor }: { tintColor?: ColorValue }) {
   const navigation = useNavigation();
+  const fill = typeof tintColor === 'string' ? tintColor : '#000';
   return (
     <TouchableOpacity
       onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
       style={styles.hamburger}
     >
       <Svg width={24} height={24} viewBox="0 0 24 24">
-        <Rect
-          x={2}
-          y={4}
-          width={20}
-          height={2}
-          rx={1}
-          fill={tintColor ?? '#000'}
-        />
-        <Rect
-          x={2}
-          y={11}
-          width={20}
-          height={2}
-          rx={1}
-          fill={tintColor ?? '#000'}
-        />
-        <Rect
-          x={2}
-          y={18}
-          width={20}
-          height={2}
-          rx={1}
-          fill={tintColor ?? '#000'}
-        />
+        <Rect x={2} y={4} width={20} height={2} rx={1} fill={fill} />
+        <Rect x={2} y={11} width={20} height={2} rx={1} fill={fill} />
+        <Rect x={2} y={18} width={20} height={2} rx={1} fill={fill} />
       </Svg>
     </TouchableOpacity>
   );

apps/computer-vision/app/text_to_image/index.tsx

@@ -227,7 +227,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'rgba(0,0,0,0.1)',
     zIndex: 1,
   },

apps/computer-vision/app/vision_camera/index.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from 'expo-router';
 import {
   Camera,
   useCameraDevices,
@@ -453,7 +453,7 @@ const styles = StyleSheet.create({
   },
   buttonText: { color: 'white', fontSize: 15, fontWeight: '600' },
   loadingOverlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'rgba(0,0,0,0.6)',
     justifyContent: 'center',
     alignItems: 'center',

apps/computer-vision/babel.config.js

@@ -2,6 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    plugins: ['react-native-reanimated/plugin'],
+    plugins: ['react-native-worklets/plugin'],
   };
 };

apps/computer-vision/components/ImageWithMasks.tsx

@@ -238,7 +238,7 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
   },
   canvas: {
     width: '100%',

apps/computer-vision/components/vision_camera/tasks/ClassificationTask.tsx

@@ -106,7 +106,7 @@ export default function ClassificationTask({
 
 const styles = StyleSheet.create({
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center',
     alignItems: 'center',
   },

apps/computer-vision/package.json

@@ -11,21 +11,22 @@
     "lint": "eslint . --ext .ts,.tsx --fix"
   },
   "dependencies": {
-    "@expo/log-box": "~55.0.10",
-    "@react-native/metro-config": "^0.83.0",
+    "@expo/log-box": "~56.0.12",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native/metro-config": "^0.85.3",
     "@react-navigation/drawer": "^7.9.4",
     "@react-navigation/native": "^7.2.2",
     "@shopify/react-native-skia": "2.6.2",
-    "expo": "^55.0.13",
-    "expo-build-properties": "~55.0.13",
-    "expo-constants": "^55.0.16",
-    "expo-font": "~55.0.6",
-    "expo-linking": "~55.0.12",
-    "expo-router": "~55.0.11",
-    "expo-status-bar": "~55.0.5",
-    "metro-config": "^0.83.0",
-    "react": "19.2.5",
-    "react-native": "0.83.4",
+    "expo": "~56.0.9",
+    "expo-build-properties": "~56.0.17",
+    "expo-constants": "~56.0.17",
+    "expo-font": "~56.0.5",
+    "expo-linking": "~56.0.13",
+    "expo-router": "~56.2.9",
+    "expo-status-bar": "~56.0.4",
+    "metro-config": "^0.84.0",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
     "react-native-device-info": "^15.0.2",
     "react-native-executorch": "workspace:*",
     "react-native-executorch-expo-resource-fetcher": "workspace:*",
@@ -34,20 +35,20 @@
     "react-native-loading-spinner-overlay": "^3.0.1",
     "react-native-nitro-image": "0.13.1",
     "react-native-nitro-modules": "0.35.4",
-    "react-native-reanimated": "~4.3.0",
+    "react-native-reanimated": "4.3.1",
     "react-native-safe-area-context": "~5.7.0",
-    "react-native-screens": "~4.24.0",
+    "react-native-screens": "~4.25.2",
     "react-native-svg": "15.15.4",
     "react-native-svg-transformer": "^1.5.3",
     "react-native-vision-camera": "^5.0.6",
     "react-native-vision-camera-worklets": "^5.0.6",
-    "react-native-worklets": "0.8.1"
+    "react-native-worklets": "0.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@types/react": "~19.2.0",
     "@types/react-refresh": "^0",
-    "babel-preset-expo": "~55.0.16",
+    "babel-preset-expo": "~56.0.14",
     "react-refresh": "^0.18.0"
   },
   "private": true

apps/llm/app/_layout.tsx

@@ -3,49 +3,35 @@ import { initExecutorch } from 'react-native-executorch';
 import { ExpoResourceFetcher } from 'react-native-executorch-expo-resource-fetcher';
 import ColorPalette from '../colors';
 import React, { useState } from 'react';
-import { Text, StyleSheet, View, TouchableOpacity } from 'react-native';
 import {
-  DrawerContentComponentProps,
+  Text,
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  type ColorValue,
+} from 'react-native';
+import {
+  type DrawerContentComponentProps,
   DrawerContentScrollView,
   DrawerItemList,
-} from '@react-navigation/drawer';
-import { DrawerActions } from '@react-navigation/native';
+} from 'expo-router/build/react-navigation/drawer';
+import { DrawerActions } from 'expo-router/build/react-navigation/routers';
 import { useNavigation } from 'expo-router';
 import Svg, { Rect } from 'react-native-svg';
 import { GeneratingContext } from '../context';
 
-function HamburgerIcon({ tintColor }: { tintColor?: string }) {
+function HamburgerIcon({ tintColor }: { tintColor?: ColorValue }) {
   const navigation = useNavigation();
+  const fill = typeof tintColor === 'string' ? tintColor : '#000';
   return (
     <TouchableOpacity
       onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
       style={styles.hamburger}
     >
       <Svg width={24} height={24} viewBox="0 0 24 24">
-        <Rect
-          x={2}
-          y={4}
-          width={20}
-          height={2}
-          rx={1}
-          fill={tintColor ?? '#000'}
-        />
-        <Rect
-          x={2}
-          y={11}
-          width={20}
-          height={2}
-          rx={1}
-          fill={tintColor ?? '#000'}
-        />
-        <Rect
-          x={2}
-          y={18}
-          width={20}
-          height={2}
-          rx={1}
-          fill={tintColor ?? '#000'}
-        />
+        <Rect x={2} y={4} width={20} height={2} rx={1} fill={fill} />
+        <Rect x={2} y={11} width={20} height={2} rx={1} fill={fill} />
+        <Rect x={2} y={18} width={20} height={2} rx={1} fill={fill} />
       </Svg>
     </TouchableOpacity>
   );

apps/llm/app/llm/index.tsx

@@ -17,7 +17,7 @@ import { LLM_MODELS, LLMModelSources } from '../../components/llmModels';
 import PauseIcon from '../../assets/icons/pause_icon.svg';
 import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from 'expo-router';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GeneratingContext } from '../../context';
 import Spinner from '../../components/Spinner';

apps/llm/app/llm_structured_output/index.tsx

@@ -34,7 +34,7 @@ import { LLM_MODELS, LLMModelSources } from '../../components/llmModels';
 import PauseIcon from '../../assets/icons/pause_icon.svg';
 import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from 'expo-router';
 import { GeneratingContext } from '../../context';
 import { Schema } from 'jsonschema';
 import * as z from 'zod/v4';

apps/llm/app/llm_tool_calling/index.tsx

@@ -25,8 +25,9 @@ import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
 import * as Brightness from 'expo-brightness';
 import * as Calendar from 'expo-calendar';
+import { PermissionStatus } from 'expo';
 import { executeTool, TOOL_DEFINITIONS_PHONE } from '../../utils/tools';
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from 'expo-router';
 import { GeneratingContext } from '../../context';
 import SuggestedPrompts from '../../components/SuggestedPrompts';
 
@@ -91,17 +92,15 @@ function LLMToolCallingScreen() {
     const { status, canAskAgain } =
       await Calendar.getCalendarPermissionsAsync();
 
-    if (status === Calendar.PermissionStatus.GRANTED) {
+    if (status === PermissionStatus.GRANTED) {
       setHasCalendarPermission(true);
       return;
     }
 
-    if (status === Calendar.PermissionStatus.UNDETERMINED || canAskAgain) {
+    if (status === PermissionStatus.UNDETERMINED || canAskAgain) {
       const { status: nextStatus } =
         await Calendar.requestCalendarPermissionsAsync();
-      setHasCalendarPermission(
-        nextStatus === Calendar.PermissionStatus.GRANTED
-      );
+      setHasCalendarPermission(nextStatus === PermissionStatus.GRANTED);
       return;
     }
 

apps/llm/app/multimodal_llm/index.tsx

@@ -12,7 +12,7 @@ import {
   View,
 } from 'react-native';
 import { launchImageLibrary } from 'react-native-image-picker';
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from 'expo-router';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { models, useLLM } from 'react-native-executorch';
 import SendIcon from '../../assets/icons/send_icon.svg';

apps/llm/app/privacy_filter/index.tsx

@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused } from 'expo-router';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   models,

apps/llm/package.json

@@ -11,23 +11,23 @@
     "lint": "eslint . --ext .ts,.tsx --fix"
   },
   "dependencies": {
-    "@expo/log-box": "~55.0.10",
-    "@react-native/metro-config": "^0.83.0",
+    "@expo/log-box": "~56.0.12",
+    "@react-native/metro-config": "^0.85.3",
     "@react-navigation/drawer": "^7.9.4",
     "@react-navigation/native": "^7.2.2",
-    "expo": "^55.0.13",
-    "expo-brightness": "~55.0.13",
-    "expo-build-properties": "~55.0.13",
-    "expo-calendar": "~55.0.14",
-    "expo-constants": "^55.0.16",
-    "expo-document-picker": "~55.0.13",
-    "expo-font": "~55.0.6",
-    "expo-linking": "~55.0.12",
-    "expo-router": "~55.0.11",
-    "expo-status-bar": "~55.0.5",
-    "metro-config": "^0.83.0",
-    "react": "19.2.5",
-    "react-native": "0.83.4",
+    "expo": "^56.0.8",
+    "expo-brightness": "~56.0.5",
+    "expo-build-properties": "~56.0.16",
+    "expo-calendar": "~56.0.8",
+    "expo-constants": "~56.0.16",
+    "expo-document-picker": "~56.0.4",
+    "expo-font": "~56.0.5",
+    "expo-linking": "~56.0.13",
+    "expo-router": "~56.2.8",
+    "expo-status-bar": "~56.0.4",
+    "metro-config": "^0.84.0",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
     "react-native-audio-api": "0.12.2",
     "react-native-device-info": "^15.0.2",
     "react-native-executorch": "workspace:*",
@@ -38,7 +38,7 @@
     "react-native-markdown-display": "^7.0.2",
     "react-native-reanimated": "~4.3.0",
     "react-native-safe-area-context": "~5.7.0",
-    "react-native-screens": "~4.24.0",
+    "react-native-screens": "~4.25.2",
     "react-native-svg": "15.15.4",
     "react-native-svg-transformer": "^1.5.3",
     "react-native-worklets": "0.8.1"
@@ -47,7 +47,7 @@
     "@babel/core": "^7.29.0",
     "@types/react": "~19.2.14",
     "@types/react-refresh": "^0",
-    "babel-preset-expo": "~55.0.16",
+    "babel-preset-expo": "~56.0.14",
     "react-refresh": "^0.18.0"
   },
   "private": true