feat: add modular resource fetcher adapters for Expo and bare React Native

.cspell-wordlist.txt

@@ -6,6 +6,8 @@ torch
 huggingface
 bbox
 bboxes
+chatbots
+llms
 deeplab
 unsqueeze
 qlora
@@ -104,3 +106,9 @@ POTTEDPLANT
 TVMONITOR
 sublist
 TTFT
+timestamping
+logprob
+RNFS
+pogodin
+kesha
+antonov

.cspell.json

@@ -1,7 +1,7 @@
 {
   "version": "0.2",
   "language": "en",
-  "ignorePaths": ["**/node_modules", "**/Pods"],
+  "ignorePaths": ["**/node_modules", "**/Pods", "**/readmes/**"],
   "dictionaryDefinitions": [
     {
       "name": "project-words",

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
         run: yarn lint
 
       - name: Typecheck files
-        run: yarn typecheck
+        run: yarn workspaces foreach --all --topological-dev run prepare && yarn typecheck
 
   build-library:
     runs-on: ubuntu-latest
@@ -35,7 +35,5 @@ jobs:
       - name: Setup
         uses: ./.github/actions/setup
 
-      - name: Build package
-        run: |
-          cd packages/react-native-executorch
-          yarn prepare
+      - name: Build all packages
+        run: yarn workspaces foreach --all --topological-dev run prepare

.nvmrc

@@ -1 +1 @@
-v20
+v22

README.md

@@ -76,6 +76,15 @@ React Native ExecuTorch is powering [Private Mind](https://privatemind.swmansion
 ```bash
 # Install the package
 yarn add react-native-executorch
+
+# If you use expo, please add these packages for resource fetching:
+yarn add @react-native-executorch/expo-adapter
+yarn add expo-file-system expo-asset
+
+#if you use bare React Native project use these packages:
+yarn add @react-native-executorch/bare-adapter
+yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
+
 # Depending on the platform, choose either iOS or Android
 yarn expo run:< ios | android >
 ```
@@ -88,8 +97,14 @@ Add this to your component file:
 import {
   useLLM,
   LLAMA3_2_1B,
-  Message
+  Message,
+  initExecutorch,
 } from 'react-native-executorch';
+import { ExpoResourceFetcher } from '@react-native-executorch/expo-resource-fetcher';
+
+initExecutorch({
+  resourceFetcher: ExpoResourceFetcher,
+});
 
 function MyComponent() {
   // Initialize the model 🚀

apps/computer-vision/app/_layout.tsx

@@ -1,4 +1,7 @@
 import { Drawer } from 'expo-router/drawer';
+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 } from 'react-native';
@@ -10,6 +13,10 @@ import {
 } from '@react-navigation/drawer';
 import { GeneratingContext } from '../context';
 
+initExecutorch({
+  resourceFetcher: ExpoResourceFetcher,
+});
+
 interface CustomDrawerProps extends DrawerContentComponentProps {
   isGenerating: boolean;
 }

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

@@ -12,30 +12,13 @@ import {
   Skia,
   AlphaType,
   ColorType,
+  SkImage,
 } from '@shopify/react-native-skia';
 import { View, StyleSheet, Image } from 'react-native';
 import React, { useContext, useEffect, useState } from 'react';
 import { GeneratingContext } from '../../context';
 import ScreenWrapper from '../../ScreenWrapper';
 
-const width = 224;
-const height = 224;
-
-let pixels = new Uint8Array(width * height * 4);
-pixels.fill(255);
-
-let data = Skia.Data.fromBytes(pixels);
-let img = Skia.Image.MakeImage(
-  {
-    width: width,
-    height: height,
-    alphaType: AlphaType.Opaque,
-    colorType: ColorType.RGBA_8888,
-  },
-  data,
-  width * 4
-);
-
 const numberToColor: number[][] = [
   [255, 87, 51], // 0 Red
   [51, 255, 87], // 1 Green
@@ -67,48 +50,58 @@ export default function ImageSegmentationScreen() {
     setGlobalGenerating(model.isGenerating);
   }, [model.isGenerating, setGlobalGenerating]);
   const [imageUri, setImageUri] = useState('');
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const [segImage, setSegImage] = useState<SkImage | null>(null);
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
 
   const handleCameraPress = async (isCamera: boolean) => {
     const image = await getImage(isCamera);
-    const uri = image?.uri;
-    setImageUri(uri as string);
+    if (!image?.uri) return;
+    setImageUri(image.uri);
+    setImageSize({
+      width: image.width ?? 0,
+      height: image.height ?? 0,
+    });
+    setSegImage(null);
   };
 
-  const [resultPresent, setResultPresent] = useState(false);
-
   const runForward = async () => {
-    if (imageUri) {
-      try {
-        const output = await model.forward(imageUri);
-        pixels = new Uint8Array(width * height * 4);
+    if (!imageUri || imageSize.width === 0 || imageSize.height === 0) return;
+    try {
+      const { width, height } = imageSize;
+      const output = await model.forward(imageUri, [DeeplabLabel.ARGMAX]);
+      const argmax = output[DeeplabLabel.ARGMAX] || [];
+      const uniqueValues = new Set<number>();
+      for (let i = 0; i < argmax.length; i++) {
+        uniqueValues.add(argmax[i]);
+      }
+      const pixels = new Uint8Array(width * height * 4);
 
-        for (let x = 0; x < width; x++) {
-          for (let y = 0; y < height; y++) {
-            for (let i = 0; i < 3; i++) {
-              pixels[(x * height + y) * 4 + i] =
-                numberToColor[
-                  (output[DeeplabLabel.ARGMAX] || [])[x * height + y]
-                ][i];
-            }
-            pixels[(x * height + y) * 4 + 3] = 255;
-          }
+      for (let row = 0; row < height; row++) {
+        for (let col = 0; col < width; col++) {
+          const idx = row * width + col;
+          const color = numberToColor[argmax[idx]] || [0, 0, 0];
+          pixels[idx * 4] = color[0];
+          pixels[idx * 4 + 1] = color[1];
+          pixels[idx * 4 + 2] = color[2];
+          pixels[idx * 4 + 3] = 255;
         }
-
-        data = Skia.Data.fromBytes(pixels);
-        img = Skia.Image.MakeImage(
-          {
-            width: width,
-            height: height,
-            alphaType: AlphaType.Opaque,
-            colorType: ColorType.RGBA_8888,
-          },
-          data,
-          width * 4
-        );
-        setResultPresent(true);
-      } catch (e) {
-        console.error(e);
       }
+
+      const data = Skia.Data.fromBytes(pixels);
+      const img = Skia.Image.MakeImage(
+        {
+          width,
+          height,
+          alphaType: AlphaType.Opaque,
+          colorType: ColorType.RGBA_8888,
+        },
+        data,
+        width * 4
+      );
+      setSegImage(img);
+    } catch (e) {
+      console.error(e);
     }
   };
 
@@ -135,16 +128,24 @@ export default function ImageSegmentationScreen() {
             }
           />
         </View>
-        {resultPresent && (
-          <View style={styles.canvasContainer}>
+        {segImage && (
+          <View
+            style={styles.canvasContainer}
+            onLayout={(e) =>
+              setCanvasSize({
+                width: e.nativeEvent.layout.width,
+                height: e.nativeEvent.layout.height,
+              })
+            }
+          >
             <Canvas style={styles.canvas}>
               <SkiaImage
-                image={img}
+                image={segImage}
                 fit="contain"
                 x={0}
                 y={0}
-                width={width}
-                height={height}
+                width={canvasSize.width}
+                height={canvasSize.height}
               />
             </Canvas>
           </View>
@@ -181,7 +182,7 @@ const styles = StyleSheet.create({
     padding: 4,
   },
   canvas: {
-    width: width,
-    height: height,
+    width: '100%',
+    height: '100%',
   },
 });

apps/computer-vision/package.json

@@ -11,7 +11,8 @@
     "lint": "eslint . --ext .ts,.tsx --fix"
   },
   "dependencies": {
-    "@react-native/metro-config": "^0.76.3",
+    "@react-native-executorch/expo-resource-fetcher": "workspace:*",
+    "@react-native/metro-config": "^0.81.5",
     "@react-navigation/drawer": "^7.3.9",
     "@react-navigation/native": "^7.1.6",
     "@shopify/react-native-skia": "2.2.12",
@@ -21,7 +22,7 @@
     "expo-linking": "~8.0.10",
     "expo-router": "~6.0.17",
     "expo-status-bar": "~3.0.9",
-    "metro-config": "^0.81.0",
+    "metro-config": "^0.81.5",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-device-info": "^14.0.4",

apps/computer-vision/tsconfig.json

@@ -9,7 +9,10 @@
     "customConditions": ["react-native"],
     "noEmit": true,
     "paths": {
-      "react-native-executorch": ["../../packages/react-native-executorch/src"]
+      "react-native-executorch": ["../../packages/react-native-executorch/src"],
+      "@react-native-executorch/expo-resource-fetcher": [
+        "../../packages/expo-resource-fetcher/src"
+      ]
     }
   }
 }

apps/llm/app/_layout.tsx

@@ -1,15 +1,20 @@
 import { Drawer } from 'expo-router/drawer';
+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 } from 'react-native';
-
 import {
   DrawerContentComponentProps,
   DrawerContentScrollView,
   DrawerItemList,
 } from '@react-navigation/drawer';
 import { GeneratingContext } from '../context';
 
+initExecutorch({
+  resourceFetcher: ExpoResourceFetcher,
+});
+
 interface CustomDrawerProps extends DrawerContentComponentProps {
   isGenerating: boolean;
 }

apps/llm/app/llm/index.tsx

@@ -34,7 +34,7 @@ function LLMScreen() {
 
   useEffect(() => {
     if (llm.error) {
-      console.log('LLM error:', llm.error);
+      console.error('LLM error:', llm.error);
     }
   }, [llm.error]);
 

apps/llm/app/llm_structured_output/index.tsx

@@ -119,7 +119,7 @@ function LLMScreen() {
 
   useEffect(() => {
     if (llm.error) {
-      console.log('LLM error:', llm.error);
+      console.error('LLM error:', llm.error);
     }
   }, [llm.error]);
 

apps/llm/app/llm_tool_calling/index.tsx

@@ -61,7 +61,7 @@ function LLMToolCallingScreen() {
 
   useEffect(() => {
     if (llm.error) {
-      console.log('LLM error:', llm.error);
+      console.error('LLM error:', llm.error);
     }
   }, [llm.error]);