diff --git a/packages/fiber/src/native/Canvas.tsx b/packages/fiber/src/native/Canvas.tsx index f1c9f26f85..81a6d35c7f 100644 --- a/packages/fiber/src/native/Canvas.tsx +++ b/packages/fiber/src/native/Canvas.tsx @@ -141,7 +141,7 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef( return ( - {width > 0 && } + {width > 0 && } ) }, diff --git a/packages/fiber/src/native/polyfills.ts b/packages/fiber/src/native/polyfills.ts index 1db62e0ee2..a3dab1924d 100644 --- a/packages/fiber/src/native/polyfills.ts +++ b/packages/fiber/src/native/polyfills.ts @@ -33,10 +33,10 @@ export function polyfills() { }) } - async function getAsset(input: string | number): Promise { + async function getAsset(input: string | number): Promise { if (typeof input === 'string') { - // Point to storage if preceded with fs path - if (input.startsWith('file:')) return { localUri: input } as Asset + // Don't process storage or data uris + if (input.startsWith('file:') || input.startsWith('data:')) return input // Unpack Blobs from react-native BlobManager if (input.startsWith('blob:')) { @@ -56,33 +56,23 @@ export function polyfills() { reader.readAsText(blob) }) - input = `data:${blob.type};base64,${data}` - } - - // Create safe URI for JSI - if (input.startsWith('data:')) { - const [header, data] = input.split(',') - const [, type] = header.split('/') - - const localUri = fs.cacheDirectory + uuidv4() + `.${type}` - await fs.writeAsStringAsync(localUri, data, { encoding: fs.EncodingType.Base64 }) - - return { localUri } as Asset + return `data:${blob.type};base64,${data}` } } // Download bundler module or external URL - const asset = Asset.fromModule(input) + const asset = await Asset.fromModule(input).downloadAsync() + let uri = asset.localUri || asset.uri // Unpack assets in Android Release Mode - if (!asset.uri.includes(':')) { - const localUri = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}` - await fs.copyAsync({ from: asset.uri, to: localUri }) - return { localUri } as Asset + if (!uri.includes(':')) { + const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}` + const stats = await fs.getInfoAsync(file, { size: false }) + if (!stats.exists) await fs.copyAsync({ from: uri, to: file }) + uri = file } - // Otherwise, resolve from registry - return asset.downloadAsync() + return uri } // Don't pre-process urls, let expo-asset generate an absolute URL @@ -96,21 +86,24 @@ export function polyfills() { const texture = new THREE.Texture() getAsset(url) - .then(async (asset: Asset) => { - const uri = asset.localUri || asset.uri - - if (!asset.width || !asset.height) { - const { width, height } = await new Promise<{ width: number; height: number }>((res, rej) => - Image.getSize(uri, (width, height) => res({ width, height }), rej), - ) - asset.width = width - asset.height = height + .then(async (uri) => { + // Create safe URI for JSI + if (uri.startsWith('data:')) { + const [header, data] = uri.split(',') + const [, type] = header.split('/') + + uri = fs.cacheDirectory + uuidv4() + `.${type}` + await fs.writeAsStringAsync(uri, data, { encoding: fs.EncodingType.Base64 }) } + const { width, height } = await new Promise<{ width: number; height: number }>((res, rej) => + Image.getSize(uri, (width, height) => res({ width, height }), rej), + ) + texture.image = { data: { localUri: uri }, - width: asset.width, - height: asset.height, + width, + height, } texture.flipY = true texture.unpackAlignment = 1 @@ -134,9 +127,7 @@ export function polyfills() { const request = new XMLHttpRequest() getAsset(url) - .then(async (asset) => { - let uri = asset.localUri || asset.uri - + .then(async (uri) => { // Make FS paths web-safe if (uri.startsWith('file://')) { const data = await fs.readAsStringAsync(uri, { encoding: fs.EncodingType.Base64 })