diff --git a/apps/bare-rn/App.tsx b/apps/bare-rn/App.tsx index b7e28658dc..f59e81ca9c 100644 --- a/apps/bare-rn/App.tsx +++ b/apps/bare-rn/App.tsx @@ -1,3 +1,4 @@ +import 'react-native-executorch-bare-resource-fetcher/auto'; import React, { useEffect, useRef, useState } from 'react'; import { ActivityIndicator, @@ -13,12 +14,7 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import { - initExecutorch, - useLLM, - LLAMA3_2_1B_SPINQUANT, -} from 'react-native-executorch'; -import { BareResourceFetcher } from 'react-native-executorch-bare-resource-fetcher'; +import { useLLM, LLAMA3_2_1B_SPINQUANT } from 'react-native-executorch'; import { setConfig } from '@kesha-antonov/react-native-background-downloader'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; @@ -30,11 +26,6 @@ setConfig({ }, }); -// Initialize Executorch with bare adapter -initExecutorch({ - resourceFetcher: BareResourceFetcher, -}); - const ColorPalette = { primary: '#001A72', blueLight: '#C1C6E5', diff --git a/apps/computer-vision/app/_layout.tsx b/apps/computer-vision/app/_layout.tsx index ea47ebdb3f..02bfe6ad6c 100644 --- a/apps/computer-vision/app/_layout.tsx +++ b/apps/computer-vision/app/_layout.tsx @@ -1,6 +1,5 @@ +import 'react-native-executorch-expo-resource-fetcher/auto'; 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'; @@ -13,10 +12,6 @@ import { } from '@react-navigation/drawer'; import { GeneratingContext } from '../context'; -initExecutorch({ - resourceFetcher: ExpoResourceFetcher, -}); - interface CustomDrawerProps extends DrawerContentComponentProps { isGenerating: boolean; } diff --git a/apps/llm/app/_layout.tsx b/apps/llm/app/_layout.tsx index f2f49b5342..710b5130e4 100644 --- a/apps/llm/app/_layout.tsx +++ b/apps/llm/app/_layout.tsx @@ -1,6 +1,5 @@ +import 'react-native-executorch-expo-resource-fetcher/auto'; 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'; @@ -12,10 +11,6 @@ import { } from '@react-navigation/drawer'; import { GeneratingContext } from '../context'; -initExecutorch({ - resourceFetcher: ExpoResourceFetcher, -}); - interface CustomDrawerProps extends DrawerContentComponentProps { isGenerating: boolean; } diff --git a/apps/speech/App.tsx b/apps/speech/App.tsx index d336319805..895d0746b4 100644 --- a/apps/speech/App.tsx +++ b/apps/speech/App.tsx @@ -1,3 +1,4 @@ +import 'react-native-executorch-expo-resource-fetcher/auto'; import React, { useState } from 'react'; import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; import { TextToSpeechScreen } from './screens/TextToSpeechScreen'; @@ -6,12 +7,6 @@ import ColorPalette from './colors'; import ExecutorchLogo from './assets/executorch.svg'; import { Quiz } from './screens/Quiz'; import { TextToSpeechLLMScreen } from './screens/TextToSpeechLLMScreen'; -import { initExecutorch } from 'react-native-executorch'; -import { ExpoResourceFetcher } from 'react-native-executorch-expo-resource-fetcher'; - -initExecutorch({ - resourceFetcher: ExpoResourceFetcher, -}); export default function App() { const [currentScreen, setCurrentScreen] = useState< diff --git a/apps/text-embeddings/app/_layout.tsx b/apps/text-embeddings/app/_layout.tsx index 886f158b33..2eb3844dd0 100644 --- a/apps/text-embeddings/app/_layout.tsx +++ b/apps/text-embeddings/app/_layout.tsx @@ -1,6 +1,5 @@ +import 'react-native-executorch-expo-resource-fetcher/auto'; 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'; @@ -12,10 +11,6 @@ import { } from '@react-navigation/drawer'; import { GeneratingContext } from '../context'; -initExecutorch({ - resourceFetcher: ExpoResourceFetcher, -}); - interface CustomDrawerProps extends DrawerContentComponentProps { isGenerating: boolean; } diff --git a/docs/docs/01-fundamentals/01-getting-started.md b/docs/docs/01-fundamentals/01-getting-started.md index 790aa8ac33..b995d4e457 100644 --- a/docs/docs/01-fundamentals/01-getting-started.md +++ b/docs/docs/01-fundamentals/01-getting-started.md @@ -77,12 +77,20 @@ Installation is pretty straightforward, use your package manager of choice to in :::warning -Before using any other API, you must call `initExecutorch` with a resource fetcher adapter at the entry point of your app: +Before using any other API, you must register a resource fetcher adapter at the entry point of your app. The simplest way is a side-effect import: + +```js +// For Expo projects: +import 'react-native-executorch-expo-resource-fetcher/auto'; +// Or, for bare React Native projects: +import 'react-native-executorch-bare-resource-fetcher/auto'; +``` + +If you need more control — registering a custom adapter, swapping adapters at runtime, or ordering registration relative to other side effects — call `initExecutorch` directly instead: ```js import { initExecutorch } from 'react-native-executorch'; import { ExpoResourceFetcher } from 'react-native-executorch-expo-resource-fetcher'; -// or BareResourceFetcher for Expo projects initExecutorch({ resourceFetcher: ExpoResourceFetcher }); ``` diff --git a/docs/docs/01-fundamentals/02-loading-models.md b/docs/docs/01-fundamentals/02-loading-models.md index 34c56d2747..f0ce26243d 100644 --- a/docs/docs/01-fundamentals/02-loading-models.md +++ b/docs/docs/01-fundamentals/02-loading-models.md @@ -15,7 +15,13 @@ yarn add react-native-executorch-expo-resource-fetcher yarn add expo-file-system expo-asset ``` -and then add the following code in your React Native app: +and then add a single side-effect import at the entry point of your React Native app: + +```typescript +import 'react-native-executorch-expo-resource-fetcher/auto'; +``` + +If you need more control — registering a custom adapter, swapping adapters at runtime, or ordering registration relative to other side effects — call `initExecutorch` directly instead: ```typescript import { initExecutorch } from 'react-native-executorch'; @@ -35,9 +41,15 @@ yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-down and +```typescript +import 'react-native-executorch-bare-resource-fetcher/auto'; +``` + +The same `initExecutorch(...)` escape hatch applies for the bare adapter: + ```typescript import { initExecutorch } from 'react-native-executorch'; -import { BareResourceFetcher } from '@react-native-executorch/bare-adapter'; +import { BareResourceFetcher } from 'react-native-executorch-bare-resource-fetcher'; initExecutorch({ resourceFetcher: BareResourceFetcher, diff --git a/packages/bare-resource-fetcher/package.json b/packages/bare-resource-fetcher/package.json index f6e261c9bc..91a04aabe9 100644 --- a/packages/bare-resource-fetcher/package.json +++ b/packages/bare-resource-fetcher/package.json @@ -8,6 +8,10 @@ ".": { "import": "./lib/index.js", "types": "./lib/index.d.ts" + }, + "./auto": { + "import": "./lib/auto.js", + "types": "./lib/auto.d.ts" } }, "files": [ diff --git a/packages/bare-resource-fetcher/src/auto.ts b/packages/bare-resource-fetcher/src/auto.ts new file mode 100644 index 0000000000..f15f27dee6 --- /dev/null +++ b/packages/bare-resource-fetcher/src/auto.ts @@ -0,0 +1,15 @@ +// Side-effect import that registers the bare React Native resource +// fetcher with react-native-executorch on import. Saves the boilerplate +// `initExecutorch({ resourceFetcher: BareResourceFetcher })` call at +// app entry. Use this when you have nothing custom to configure: +// +// import 'react-native-executorch-bare-resource-fetcher/auto'; +// +// Stick with the explicit `initExecutorch(...)` call from the package's +// main entry if you need to register a different adapter, swap adapters +// at runtime, or order the registration relative to other side effects. + +import { initExecutorch } from 'react-native-executorch'; +import { BareResourceFetcher } from './ResourceFetcher'; + +initExecutorch({ resourceFetcher: BareResourceFetcher }); diff --git a/packages/expo-resource-fetcher/package.json b/packages/expo-resource-fetcher/package.json index 7e661e2f02..1286f17a20 100644 --- a/packages/expo-resource-fetcher/package.json +++ b/packages/expo-resource-fetcher/package.json @@ -8,6 +8,10 @@ ".": { "import": "./lib/index.js", "types": "./lib/index.d.ts" + }, + "./auto": { + "import": "./lib/auto.js", + "types": "./lib/auto.d.ts" } }, "files": [ diff --git a/packages/expo-resource-fetcher/src/auto.ts b/packages/expo-resource-fetcher/src/auto.ts new file mode 100644 index 0000000000..564a2b4c34 --- /dev/null +++ b/packages/expo-resource-fetcher/src/auto.ts @@ -0,0 +1,15 @@ +// Side-effect import that registers the Expo resource fetcher with +// react-native-executorch on import. Saves the boilerplate +// `initExecutorch({ resourceFetcher: ExpoResourceFetcher })` call at +// app entry. Use this when you have nothing custom to configure: +// +// import 'react-native-executorch-expo-resource-fetcher/auto'; +// +// Stick with the explicit `initExecutorch(...)` call from the package's +// main entry if you need to register a different adapter, swap adapters +// at runtime, or order the registration relative to other side effects. + +import { initExecutorch } from 'react-native-executorch'; +import { ExpoResourceFetcher } from './ResourceFetcher'; + +initExecutorch({ resourceFetcher: ExpoResourceFetcher }); diff --git a/packages/react-native-executorch/src/utils/ResourceFetcher.ts b/packages/react-native-executorch/src/utils/ResourceFetcher.ts index bf5db8267d..78d9ac879d 100644 --- a/packages/react-native-executorch/src/utils/ResourceFetcher.ts +++ b/packages/react-native-executorch/src/utils/ResourceFetcher.ts @@ -107,7 +107,7 @@ export class ResourceFetcher { static getAdapter(): ResourceFetcherAdapter { if (!this.adapter) { const errorMessage = - 'ResourceFetcher adapter is not initialized. Please call initExecutorch({ resourceFetcher: ... }) with a valid adapter, e.g., from react-native-executorch-expo-resource-fetcher or react-native-executorch-bare-resource-fetcher. For more details please refer to: https://docs.swmansion.com/react-native-executorch/docs/next/fundamentals/loading-models'; + "ResourceFetcher adapter is not initialized. The simplest fix is a side-effect import at your app entry point: `import 'react-native-executorch-expo-resource-fetcher/auto'` (Expo) or `import 'react-native-executorch-bare-resource-fetcher/auto'` (bare React Native). For full control over registration, call `initExecutorch({ resourceFetcher: ... })` directly. See: https://docs.swmansion.com/react-native-executorch/docs/next/fundamentals/loading-models"; // for sanity :) Logger.error(errorMessage); throw new RnExecutorchError(