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

## Description

This PR bumps Expo SDK to 56 across all demo apps using Expo. It also
refactors the Expo Resource Fetcher to use the aforementioned version.
For users using <56, a /legacy import for ExpoResourceFetcher is still
available.

### Introduces a breaking change?

- [x] Yes
- [ ] No

### Type of change

- [ ] Bug fix (change which fixes an issue)
- [ ] New feature (change which adds functionality)
- [ ] Documentation update (improves or adds clarity to existing
documentation)
- [x] Other (chores, tests, code style improvements etc.)

### Tested on

- [x] iOS
- [x] Android

### Testing instructions

- In an app on Expo SDK <56 (e.g. SDK 54/55), install this package and
import { ExpoResourceFetcher } from
'react-native-executorch-expo-resource-fetcher'. Confirm it throws
RnExecutorchError with code ResourceFetcherFileSystemApiUnavailable
(0xbc) and a message pointing at the /legacy entry point — not the
cryptic File.createDownloadTask is not a function.
- In the same old-SDK app, switch the import to
react-native-executorch-expo-resource-fetcher/legacy and confirm fetch,
pause/resume/cancel, deleteResources, and listDownloadedFiles all still
work.
- In an app on Expo SDK 56+, import from the default entry point and
confirm the guard does not fire and downloads work end-to-end.
- Run yarn install at the repo root and confirm no new peer-dep warnings
on the SDK-56 demo apps under apps/.


### Screenshots

<!-- Add screenshots here, if applicable -->

### Related issues

<!-- Link related issues here using #issue-number -->

### Checklist

- [ ] I have performed a self-review of my code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [ ] My changes generate no new warnings

### Additional notes

<!-- Include any additional information, assumptions, or context that
reviewers might need to understand this PR. -->

Author: chmjkb

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';