Asset to File ?

pacoelayudante · April 1, 2020, 4:03am

Hola! I hope not to be posting in the wrong subforum, since it’s the first post it will be a shame to be misplaced : p

I want to know if is there a way to map, convert or download an Asset (local) into a File://

I am right now like this

“react-native-community/slider”: “^2.0.9”,
“expo-gl”: “^8.1.0”,
“expo-gl-cpp”: “^8.1.0”,
“react”: “16.9.0”,
“react-native”: “^0.61.5”,
“react-native-color-picker”: “^0.5.2”,
“react-native-linear-gradient”: “^2.5.6”,
“react-native-unimodules”: “^0.7.0”,
“react-native-whatsapp-stickers”: “^2.0.2”

Currently, the expo-gl systems seems like that it only accepts file:// for texImage2d, and using downloadAsync worked fine while working in dev. But on release, the Asset is no more on the network, and doing downloadAsync wont give a file://
¿what can I do?
Some people suggest using react-native-fs - npm but I would like to avoid keep adding stuff to the project. I feel like there may be a way and I am missing it
Thanks’ for your time
Saludos!

notbrent · April 1, 2020, 4:06am

if you comment out this block does it do what you expect? expo/PlatformUtils.ts at c105a516cfc373fb48d0ab6aac2280d5647f13a0 · expo/expo · GitHub

pacoelayudante · April 1, 2020, 5:22am

I tried, and it still doesn’t work.
Oh I forgot to mention I am building for Android
But I think I misexplained myself, the Asset I’m trying to fetch comes fromModule(require(etc)), and it does not have a file:// prefix (and I wish it had, that’s the problem). That fragment of code seems to prevent downloading a file twice, or something

This is one of the Asset and how it looks like (in release)

{ hash: ‘8650f4806a3e632e03ed4870452fc3d5’,
localUri: ‘skins_demonhead_splash_demonhead_base_negro’,
width: 1000,
height: 1394,
downloading: false,
downloaded: true,
_downloadCallbacks: [ ],
name: ‘demonhead_base_negro’,
type: ‘png’,
uri: ‘skins_demonhead_splash_demonhead_base_negro’ }

The require is kinda like require('./skins/demonhead_splash/demonhead_base_negro.png')

In debug, it makes sense, since as far as I understood, it is served from the metro. So when I Asset.downloadAsync it gives a correct localUri. But when I do release, and it is bundled in the app, this happens, and doing downloadAsync does not give a localUri with file:// prefix, it just keeps this weird plain uri (that I don’t have been able to learn what is for, or why it looks like that)
This is related specifically with this Issue
In this Issue, the workaround is with the module I mentioned before, react-native-fs (file system) but I am trying to avoid it if possible

pacoelayudante · April 1, 2020, 5:24am

By the way ¿is this something related? ¿Does this pattern to get the Asset file representation applies to my case?

github.com

expo/expo/blob/c105a516cfc373fb48d0ab6aac2280d5647f13a0/packages/expo-asset/build/EmbeddedAssets.js

import Constants from 'expo-constants';
import * as FileSystem from 'expo-file-system';
import { getLocalAssets } from './PlatformUtils';
// Fast lookup check if assets are available in the local bundle in managed apps
const bundledAssets = new Set(FileSystem.bundledAssets || []);
// localAssets are provided by the expo-updates module
const localAssets = getLocalAssets();
/**
 * Returns the local URI of an embedded asset from its hash and type, or null if the asset is not
 * included in the app bundle.
 */
export function getEmbeddedAssetUri(hash, type) {
    const localAssetsKey = `${hash}.${type ?? ''}`;
    if (!localAssets.hasOwnProperty(localAssetsKey) && !__DEV__) {
        // check legacy location in case we're in Expo client/managed workflow
        // TODO(eric): remove this once bundledAssets is no longer exported from FileSystem
        const assetName = `asset_${hash}${type ? `.${type}` : ''}`;
        if (Constants.appOwnership !== 'standalone' || !bundledAssets.has(assetName)) {
            return null;
        }

This file has been truncated. show original

pacoelayudante · April 4, 2020, 8:13pm

You are gonna love how I solved it… or hate it, not sure
I was looking around the libraries and digging and stuff, and I came across a bunch of stuff (some might be obvious to you, but to me where all discoveries, jaja)
First, I wondered where and how assets are bundled on the apk with React Native, and they go to the res folder, but, the subfolder they end up is dependant on their extension, so png,jpg,webp,… go to drawables ¿right?
Then I noticed the expo-asset download was basically expo-file-system download, and I followed that trail until I found this bunch of code in the expo-file-system library:

github.com

expo/expo/blob/0246aa08c82dcc80b2e5df7601537c06658658a0/packages/expo-file-system/android/src/main/java/expo/modules/filesystem/FileSystemModule.java#L472-L476


      
          if (!url.contains(":")) {
            Context context = getContext();
            Resources resources = context.getResources();
            String packageName = context.getPackageName();
            int resourceId = resources.getIdentifier(url, "raw", packageName);

mmmhhh… interesting…
if (!url.contains(":")) is for the bundled assets, is what I had noticed before, that their uri is just a name without prefix. And then resources.getIdentifier(url, "raw", packageName);!
raw… the thing tries to do the downloads, from the resources, but only in the raw folder. But since this assets are images, they are in the drawables folder…
So, since my specific problem was to get this images as textures for the GLContext, I really didn’t care if they weren’t drawables. So I converted their extension from .png to .xpng (because why not) and then added a bunch of code so React Native didn’t ignore those as trash

github.com

pacoelayudante/shadow-stickers/blob/b6f512ae5ba4725bedb6673c4440f85a94066611/metro.config.js#L7-L21


      
          const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts;
          
          
module.exports = {
            transformer: {
              getTransformOptions: async () => ({
                transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
                },
              }),
            },
            resolver: {
              assetExts: [...defaultAssetExts, 'xpng'],
            },
          };

With that, the xpng are added to de bundle, in the raw subfolder (because react doesn’t know what they are for ¿I guess?)
Then when I get the asset with x = Asset.fromModule I also do x.type = 'png' (just in case, didn’t really tried leaving like 'xpng') and then doing x.downloadAsync works as expected, the resource is downloaded to the cache, and I can finally use it for gl.texImage2D
Well, thanks for reading
I propose that the expo-file-system should sweep all the resource types and not just the raw to avoid this in the future
Best Regards!

Topic		Replies	Views
Converting Asset to File or Blob? Expo SDK medialibrary	1	348	August 28, 2021
Save a file to device folder (like "Download") How to / Third Party Tooling	17	13472	May 6, 2022
Loading non-media assets (markdown) Expo SDK	5	2617	February 19, 2021
Best Practice for Downloading Videos, Storing File Locally, and Playing In App? Expo SDK	2	9383	August 4, 2017
How do i store images/files Expo SDK	12	8223	May 24, 2020

Asset to File ?

Related Topics