Attempt to upgrade to Expo 54.

Author: jameswilddev

package-lock.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/jest": "^29.5.4",
-    "@types/react": "~19.0.10",
+    "@types/react": "^19.1.10",
     "@types/react-test-renderer": "^19.1.0",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "del-cli": "^5.0.0",
@@ -30,12 +30,12 @@
     "eslint-plugin-react": "^7.33.2",
     "expo-doctor": "^1.1.2",
     "jest": "^29.4.0",
-    "jest-expo": "~53.0.7",
+    "jest-expo": "^54.0.12",
     "metro-react-native-babel-preset": "0.67.0",
     "npm-run-all": "^4.1.5",
-    "react": "19.0.0",
-    "react-native": "0.79.3",
-    "typescript": "~5.8.3"
+    "react": "^19.1.0",
+    "react-native": "^0.81.4",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
     "react": "*",
@@ -57,18 +57,18 @@
   "types": "index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@sentry/react-native": "6.14.0",
-    "events": "3.3.0",
-    "expo": "^53.0.11",
-    "expo-constants": "~17.1.6",
-    "expo-crypto": "~14.1.5",
-    "expo-file-system": "~18.1.10",
-    "expo-image-picker": "~16.1.4",
-    "expo-intent-launcher": "~12.1.5",
-    "expo-media-library": "~17.1.7",
-    "expo-secure-store": "~14.2.3",
+    "@sentry/react-native": "~6.20.0",
+    "events": "^3.3.0",
+    "expo": "^54.0.9",
+    "expo-constants": "~18.0.9",
+    "expo-crypto": "~15.0.7",
+    "expo-file-system": "~19.0.14",
+    "expo-image-picker": "~17.0.8",
+    "expo-intent-launcher": "~13.0.7",
+    "expo-media-library": "~18.2.0",
+    "expo-secure-store": "~15.0.7",
     "filter-validate-email": "^1.1.3",
-    "react-native-gesture-handler": "~2.24.0",
-    "react-native-safe-area-context": "5.4.0"
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-safe-area-context": "~5.6.0"
   }
 }

package.json

@@ -1,4 +1,4 @@
-import * as FileSystem from 'expo-file-system'
+import { Directory, File, Paths } from 'expo-file-system'
 import type { FileStoreInterface } from '../../types/FileStoreInterface'
 import type { UuidGenerator } from '../UuidGenerator'
 
@@ -20,10 +20,8 @@ export class FileStore implements FileStoreInterface {
       try {
         this.loading = true
 
-        await FileSystem.makeDirectoryAsync(
-          `${FileSystem.documentDirectory}react-native-app-helpers/file-store/${subdirectoryName}`,
-          { intermediates: true }
-        )
+        const directory = new Directory(Paths.document, 'react-native-app-helpers', 'file-store', subdirectoryName)
+        directory.create({ intermediates: true })
 
         this.subdirectoryName = subdirectoryName
       } finally {
@@ -34,13 +32,13 @@ export class FileStore implements FileStoreInterface {
     }
   }
 
-  generatePath (uuid: string): string {
+  generatePath (uuid: string): ReadonlyArray<Directory | string> {
     if (this.loading) {
       throw new Error('The file store is currently loading.')
     } else if (this.subdirectoryName === null) {
       throw new Error('The file store is not loaded.')
     } else {
-      return `${FileSystem.documentDirectory}react-native-app-helpers/file-store/${this.subdirectoryName}/${uuid}`
+      return [Paths.document, 'react-native-app-helpers', 'file-store', this.subdirectoryName, uuid]
     }
   }
 
@@ -53,9 +51,9 @@ export class FileStore implements FileStoreInterface {
       try {
         this.operationsInProgress++
 
-        return await FileSystem.readDirectoryAsync(
-          `${FileSystem.documentDirectory}react-native-app-helpers/file-store/${this.subdirectoryName}`
-        )
+        const directory = new Directory(Paths.document, 'react-native-app-helpers', 'file-store', this.subdirectoryName)
+
+        return (directory.list()).map(x => x.name)
       } finally {
         this.operationsInProgress--
       }
@@ -71,7 +69,8 @@ export class FileStore implements FileStoreInterface {
       try {
         this.operationsInProgress++
 
-        await FileSystem.deleteAsync(this.generatePath(uuid))
+        const file = new File(...this.generatePath(uuid))
+        file.delete()
       } finally {
         this.operationsInProgress--
       }
@@ -103,10 +102,9 @@ export class FileStore implements FileStoreInterface {
 
         const output = this.uuidGenerator.generate()
 
-        await FileSystem.moveAsync({
-          from: fileUri,
-          to: this.generatePath(output)
-        })
+        const file = new File(fileUri)
+
+        file.move(new File(...this.generatePath(output)))
 
         return output
       } finally {
@@ -126,10 +124,9 @@ export class FileStore implements FileStoreInterface {
 
         const output = this.uuidGenerator.generate()
 
-        await FileSystem.copyAsync({
-          from: fileUri,
-          to: this.generatePath(output)
-        })
+        const file = new File(fileUri)
+
+        file.copy(new File(...this.generatePath(output)))
 
         return output
       } finally {

react-native/services/FileStore/index.tsx

@@ -1,4 +1,4 @@
-import * as FileSystem from 'expo-file-system'
+import { type Directory, File } from 'expo-file-system'
 import type { EmptyRequestBody } from '../../types/EmptyRequestBody'
 import type { FileRequestBody } from '../../types/FileRequestBody'
 import type { Json } from '../../types/Json'
@@ -7,14 +7,6 @@ import type { QueryParameter } from '../../types/QueryParameter'
 import type { QueryParameters } from '../../types/QueryParameters'
 import type { RequestInterface } from '../../types/RequestInterface'
 
-class AbortError extends Error {
-  constructor () {
-    super('Aborted.')
-
-    this.name = 'AbortError'
-  }
-}
-
 /**
  * Allows HTTP/S requests to be made for JSON and files relative to a base URL.
  */
@@ -157,9 +149,11 @@ export class Request implements RequestInterface {
   ): null | BodyInit {
     switch (requestBody.type) {
       case 'empty':
-      case 'file':
         return null
 
+      case 'file':
+        return new File(...requestBody.fileUri)
+
       case 'json':
         return JSON.stringify(requestBody.value)
     }
@@ -176,54 +170,16 @@ export class Request implements RequestInterface {
     return await this.withTimeout(abortSignal, async (signal) => {
       const url = this.constructUrl(route, queryParameters)
 
-      let response: { readonly status: number }
-
-      switch (requestBody.type) {
-        case 'empty':
-        case 'json':
-          response = await this.fetch(url, {
-            signal,
-            method,
-            headers: {
-              ...this.commonHeaders(),
-              ...this.requestBodyHeaders(requestBody),
-              Accept: 'application/json' // If we do not do this, Laravel will redirect to / in the event of an error, hiding the returned validation error.
-            },
-            body: this.requestBodyBody(requestBody)
-          })
-          break
-
-        case 'file': {
-          const task = FileSystem.createUploadTask(url, requestBody.fileUri, {
-            uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT,
-            headers: {
-              ...this.commonHeaders(),
-              ...this.requestBodyHeaders(requestBody),
-              Accept: 'application/json' // If we do not do this, Laravel will redirect to / in the event of an error, hiding the returned validation error.
-            }
-          })
-
-          const eventListener = (): void => {
-            void task.cancelAsync()
-          }
-
-          try {
-            signal.addEventListener('abort', eventListener)
-
-            const result = await task.uploadAsync()
-
-            // NOTE: According to Expo's documentation, this should only return a value or undefined, but it has been observed to return null when the task is aborted.
-            if (result === undefined || result === null) {
-              throw new AbortError()
-            } else {
-              response = result
-            }
-          } finally {
-            signal.removeEventListener('abort', eventListener)
-          }
-          break
-        }
-      }
+      const response = await this.fetch(url, {
+        signal,
+        method,
+        headers: {
+          ...this.commonHeaders(),
+          ...this.requestBodyHeaders(requestBody),
+          Accept: 'application/json' // If we do not do this, Laravel will redirect to / in the event of an error, hiding the returned validation error.
+        },
+        body: this.requestBodyBody(requestBody)
+      })
 
       this.checkStatusCode(method, url, response.status, expectedStatusCodes)
 
@@ -271,49 +227,24 @@ export class Request implements RequestInterface {
     })
   }
 
-  async returningFile<T extends string>(
-    method: 'GET',
+  async returningFile (
+    _method: 'GET',
     route: string,
     requestBody: EmptyRequestBody,
     queryParameters: QueryParameters,
 
-    // Not yet possible with FileSystem.downloadAsync.
+    // Not yet possible with File.downloadAsync.
     _abortSignal: null,
 
-    fileUri: string,
-    successfulStatusCodes: readonly T[],
-    unsuccessfulStatusCodes: readonly T[]
-  ): Promise<T> {
+    fileUri: ReadonlyArray<Directory | string>
+  ): Promise<void> {
     const url = this.constructUrl(route, queryParameters)
 
-    try {
-      const response = await FileSystem.downloadAsync(url, fileUri, {
-        headers: {
-          ...this.commonHeaders(),
-          ...this.requestBodyHeaders(requestBody)
-        }
-      })
-
-      this.checkStatusCode(method, url, response.status, [
-        ...successfulStatusCodes,
-        ...unsuccessfulStatusCodes
-      ])
-
-      // It's possible that the application will close before we hit this line,
-      // but this is the best we can do unfortunately.
-      if (unsuccessfulStatusCodes.includes(String(response.status) as T)) {
-        await FileSystem.deleteAsync(fileUri, { idempotent: true })
+    await File.downloadFileAsync(url, new File(...fileUri), {
+      headers: {
+        ...this.commonHeaders(),
+        ...this.requestBodyHeaders(requestBody)
       }
-
-      return String(response.status) as T
-    } catch (e) {
-      // It has been observed that FileSystem.downloadAsync will still create
-      // files for non-2xx status codes.  It's possible that the application
-      // will close before we hit this line, but this is the best we can do
-      // unfortunately.
-      await FileSystem.deleteAsync(fileUri, { idempotent: true })
-
-      throw e
-    }
+    })
   }
 }

react-native/services/Request/index.tsx

@@ -1002,7 +1002,7 @@ test('get request file response empty', async () => {
   await request.withoutResponse(
     'PUT',
     'example/route',
-    { type: 'file', fileUri: 'Example File Uri' },
+    { type: 'file', fileUri: ['Example', 'File Uri'] },
     {
       'Example Query Parameter A Key': 'Example Query Parameter A Value',
       'Example Query Parameter B Key': 12.34,
@@ -1062,7 +1062,7 @@ test('get request file response empty external abort', async () => {
   const promise = request.withoutResponse(
     'PUT',
     'example/route',
-    { type: 'file', fileUri: 'Example File Uri' },
+    { type: 'file', fileUri: ['Example', 'File Uri'] },
     {
       'Example Query Parameter A Key': 'Example Query Parameter A Value',
       'Example Query Parameter B Key': 12.34,
@@ -1126,7 +1126,7 @@ test('get request file response empty external abort null', async () => {
   const promise = request.withoutResponse(
     'PUT',
     'example/route',
-    { type: 'file', fileUri: 'Example File Uri' },
+    { type: 'file', fileUri: ['Example', 'File Uri'] },
     {
       'Example Query Parameter A Key': 'Example Query Parameter A Value',
       'Example Query Parameter B Key': 12.34,
@@ -1715,7 +1715,7 @@ test('get request empty response file', async () => {
     fetch as unknown as GlobalFetch['fetch']
   )
 
-  const response = await request.returningFile(
+  await request.returningFile(
     'GET',
     'example/route',
     { type: 'empty' },
@@ -1726,13 +1726,9 @@ test('get request empty response file', async () => {
       'Example Query Parameter D Key': true
     },
     null,
-    'Example File Uri',
-    ['244', '123', '89'],
-    ['800', '222', '347', '844']
+    ['Example', 'File Uri']
   )
 
-  expect(response).toEqual('123')
-
   expect(FileSystem.downloadAsync).toBeCalledTimes(1)
   expect(FileSystem.downloadAsync).toBeCalledWith(
     'https://example-base-url.com/example/sub/path/example/route?Example%20Query%20Parameter%20A%20Key=Example%20Query%20Parameter%20A%20Value&Example%20Query%20Parameter%20B%20Key=12.34&Example%20Query%20Parameter%20D%20Key',
@@ -1763,7 +1759,7 @@ test('get request empty response file failure status code', async () => {
     fetch as unknown as GlobalFetch['fetch']
   )
 
-  const response = await request.returningFile(
+  await request.returningFile(
     'GET',
     'example/route',
     { type: 'empty' },
@@ -1774,13 +1770,9 @@ test('get request empty response file failure status code', async () => {
       'Example Query Parameter D Key': true
     },
     null,
-    'Example File Uri',
-    ['244', '123', '89'],
-    ['800', '222', '347', '844']
+    ['Example', 'File Uri']
   )
 
-  expect(response).toEqual('347')
-
   expect(FileSystem.downloadAsync).toBeCalledTimes(1)
   expect(FileSystem.downloadAsync).toBeCalledWith(
     'https://example-base-url.com/example/sub/path/example/route?Example%20Query%20Parameter%20A%20Key=Example%20Query%20Parameter%20A%20Value&Example%20Query%20Parameter%20B%20Key=12.34&Example%20Query%20Parameter%20D%20Key',
@@ -1826,9 +1818,7 @@ test('get request empty response file invalid status code', async () => {
       'Example Query Parameter D Key': true
     },
     null,
-    'Example File Uri',
-    ['244', '123', '89'],
-    ['800', '222', '347', '844']
+    ['Example', 'File Uri']
   )
 
   await expect(promise).rejects.toEqual(