fix: refactor Expo FileSystem access to use importLegacyExpoFSModules for Expo 53

Refs: software-mansion#699 (comment)

Author: Wu-Chun-Ming

apps/speech-to-text/screens/SpeechToTextScreen.tsx

@@ -10,17 +10,22 @@ import {
   Platform,
 } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import { useSpeechToText, WHISPER_TINY_EN } from 'react-native-executorch';
+import {
+  importLegacyExpoFSModules,
+  useSpeechToText,
+  WHISPER_TINY_EN,
+} from 'react-native-executorch';
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import {
   AudioManager,
   AudioRecorder,
   AudioContext,
 } from 'react-native-audio-api';
-import * as FileSystem from 'expo-file-system/legacy';
 import SWMIcon from '../assets/swm_icon.svg';
 import DeviceInfo from 'react-native-device-info';
 
+const { cacheDirectory, downloadAsync } = importLegacyExpoFSModules();
+
 const isSimulator = DeviceInfo.isEmulatorSync();
 
 export const SpeechToTextScreen = () => {
@@ -56,9 +61,9 @@ export const SpeechToTextScreen = () => {
       return;
     }
 
-    const { uri } = await FileSystem.downloadAsync(
+    const { uri } = await downloadAsync(
       audioURL,
-      FileSystem.cacheDirectory + 'audio_file'
+      cacheDirectory + 'audio_file'
     );
 
     const audioContext = new AudioContext({ sampleRate: 16000 });

packages/react-native-executorch/src/constants/directories.ts

@@ -1,3 +1,5 @@
-import { documentDirectory } from 'expo-file-system/legacy';
+import { importLegacyExpoFSModules } from '../utils/ResourceFetcher';
+
+const { documentDirectory } = importLegacyExpoFSModules();
 
 export const RNEDirectory = `${documentDirectory}react-native-executorch/`;

packages/react-native-executorch/src/controllers/LLMController.ts

@@ -1,5 +1,8 @@
 import { ResourceSource } from '../types/common';
-import { ResourceFetcher } from '../utils/ResourceFetcher';
+import {
+  importLegacyExpoFSModules,
+  ResourceFetcher,
+} from '../utils/ResourceFetcher';
 import { ETError, getError } from '../Error';
 import { Template } from '@huggingface/jinja';
 import { DEFAULT_CHAT_CONFIG } from '../constants/llmDefaults';
@@ -13,7 +16,7 @@ import {
 } from '../types/llm';
 import { parseToolCall } from '../utils/llm';
 import { Logger } from '../common/Logger';
-import { readAsStringAsync } from 'expo-file-system/legacy';
+const { readAsStringAsync } = importLegacyExpoFSModules();
 
 export class LLMController {
   private nativeModule: any;

packages/react-native-executorch/src/utils/ResourceFetcher.ts

@@ -27,8 +27,27 @@
  *   - Implements linked list behavior via the `.next` attribute
  *   - Automatically processes subsequent downloads when `.next` contains a valid resource
  */
+import type * as FileSystemTypes from 'expo-file-system';
 
-import {
+export function importLegacyExpoFSModules() {
+  let FileSystem: typeof FileSystemTypes;
+
+  try {
+    const expoPkg = require('expo/package.json');
+    const sdkVersion = expoPkg.version.split('.')[0];
+
+    if (Number(sdkVersion) > 53) {
+      FileSystem = require('expo-file-system/legacy');
+    } else {
+      FileSystem = require('expo-file-system');
+    }
+  } catch (e) {
+    throw new Error('Expo must be installed to use react-native-executorch');
+  }
+  return FileSystem;
+}
+
+const {
   cacheDirectory,
   copyAsync,
   createDownloadResumable,
@@ -38,7 +57,8 @@ import {
   EncodingType,
   deleteAsync,
   readDirectoryAsync,
-} from 'expo-file-system/legacy';
+} = importLegacyExpoFSModules();
+
 import { Asset } from 'expo-asset';
 import { Platform } from 'react-native';
 import { RNEDirectory } from '../constants/directories';

packages/react-native-executorch/src/utils/ResourceFetcherUtils.ts

@@ -1,16 +1,14 @@
+import type * as FileSystemTypes from 'expo-file-system';
 import { RNEDirectory } from '../constants/directories';
 import { ResourceSource } from '../types/common';
 import { Asset } from 'expo-asset';
 import { Logger } from '../common/Logger';
+import { importLegacyExpoFSModules } from './ResourceFetcher';
 
 /**
  * @internal
  */
-import {
-  getInfoAsync,
-  makeDirectoryAsync,
-  type DownloadResumable,
-} from 'expo-file-system/legacy';
+const { getInfoAsync, makeDirectoryAsync } = importLegacyExpoFSModules();
 
 export const enum HTTP_CODE {
   OK = 200,
@@ -42,7 +40,7 @@ export interface ResourceSourceExtended {
 }
 
 export interface DownloadResource {
-  downloadResumable: DownloadResumable;
+  downloadResumable: FileSystemTypes.DownloadResumable;
   status: DownloadStatus;
   extendedInfo: ResourceSourceExtended;
 }