fix(native): use FS for Android Release Mode

package.json

@@ -69,6 +69,7 @@
     "eslint-plugin-react-hooks": "^4.4.0",
     "expo-asset": "^8.4.6",
     "expo-gl": "^11.1.2",
+    "expo-file-system": "^11.1.3",
     "husky": "^7.0.4",
     "jest": "^29.3.1",
     "jest-cli": "^27.5.1",

packages/fiber/package.json

@@ -55,6 +55,7 @@
     "expo": ">=43.0",
     "expo-asset": ">=8.4",
     "expo-gl": ">=11.0",
+    "expo-file-system": ">=11.0",
     "react": ">=18.0",
     "react-dom": ">=18.0",
     "react-native": ">=0.64",
@@ -75,6 +76,9 @@
     },
     "expo-gl": {
       "optional": true
+    },
+    "expo-file-system": {
+      "optional": true
     }
   }
 }

packages/fiber/src/native.tsx

@@ -16,6 +16,7 @@ export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/e
 export { createEvents } from './core/events'
 export type { ObjectMap, Camera } from './core/utils'
 export * from './native/Canvas'
+export * from './native/polyfills'
 export { createTouchEvents as events } from './native/events'
 export type { GlobalRenderCallback, GlobalEffectType } from './core/loop'
 export * from './core'

packages/fiber/src/native/polyfills.ts

@@ -1,10 +1,16 @@
-import * as THREE from 'three'
 import type { Asset } from 'expo-asset'
+import * as THREE from 'three'
 
 // Check if expo-asset is installed (available with expo modules)
 let expAsset: typeof Asset | undefined
+// expo-file-system will never be installed in case if expo is not here
+let copyAsync: null | ((options: { from: string; to: string }) => Promise<void>) = null
+let cacheDirectory: string | null = null
 try {
   expAsset = require('expo-asset')?.Asset
+  const fs = require('expo-file-system')
+  copyAsync = fs.copyAsync
+  cacheDirectory = fs.cacheDirectory
 } catch (_) {}
 
 /**
@@ -38,22 +44,39 @@ export function polyfills() {
 
     // @ts-ignore
     texture.isDataTexture = true
-
-    getAsset(url)
-      .downloadAsync()
-      .then((asset: Asset) => {
-        texture.image = {
-          data: asset,
-          width: asset.width,
-          height: asset.height,
+    const asset = getAsset(url)
+
+    ;(async () => {
+      // this means it's android liniking
+      if (copyAsync && cacheDirectory && !asset.uri.includes('://')) {
+        const localUri = `${cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`
+        await copyAsync({
+          from: asset.uri,
+          to: localUri,
+        })
+        return {
+          data: { localUri },
+          asset,
         }
-        texture.flipY = true
-        texture.unpackAlignment = 1
-        texture.needsUpdate = true
-
-        onLoad?.(texture)
-      })
-      .catch(onError)
+      }
+
+      const data = await asset.downloadAsync()
+      return {
+        data,
+        asset: data,
+      }
+    })().then(({ data, asset }) => {
+      texture.image = {
+        data,
+        width: asset.width,
+        height: asset.height,
+      }
+      texture.flipY = true
+      texture.unpackAlignment = 1
+      texture.needsUpdate = true
+
+      onLoad?.(texture)
+    })
 
     return texture
   }