Shopify
Load images from native app local assets
Description
React-native images can be loaded from the app's native assets catalog (drawables on android and Images.xcassets on iOS) by providing source={{uri: "image_name_without_suffix"}}. This method of loading performs much better than loading via require("../path/to/image.png").
Can react-native-skia support loading images from the native app assets?
It doesn't seem to be possible at the moment. Most of my image assets are loaded via uri so I haven't been able to use them with skia so far.
Hi @evelant! Thanks for the suggestion - we've discussed the asset loading system previously and have decided that we want to keep it as simple as possible so this is probably why this has not been implemented. We're open for PRs to this, so please feel free to investigate how this can be done.
It looks like content in drawables on android or Images.xcassets on iOS is available via filesystem modules?
What is the best practice to access those files in React Native?
Did you try to pass these resolved URIs into something like useImage?
If you can fetch the bytes from these folders, React Native Skia is focused on providing the utilities to use them as a font or an image for instance. In terms of fetching the bytes themselves, we are looking to let people use the best practices and modules in React Native. We do provide a utility function on Android and iOS to fetch URIs, but we try to keep these utilities to a minimum.
With the builtin support on react-native you don't resolve the URIs to anything. You just pass the name of the asset without the file extension that is in either android/drawables or Images.xcassets. This causes react-native to load the image entirely in native code without moving it over the JS bridge. That's why it's so much faster.
Fetching the bytes into JS then sending them back over the bridge to react-native-skia would likely be prohibitively slow and would negate any benefit from using drawables/xcassets.
We're not transferring the bytes over the bridge - React Native Skia will wrap the data for the image in an SkData object that is kept on the native side (unless you explicitly ask for the bytes of course).
One thing that is done in React Native is to call the resolveAssetSource function before passing the uri down - maybe that's something we should look into as well? Then React Native will hopefully do all the work for us converting to correct URLs etc.
Or maybe it is working already, could that be? On iOS for instance, this method is used: https://developer.apple.com/documentation/foundation/nsdata/1547245-datawithcontentsofurl. So by maybe providing the right URL is good enough?
Yes, we already use dataWithContentsOfURL in the PlatformContext file that loads images on iOS - so I believe we could try adding resolveAssetSource() and set up some tests to see if it would work out of the box?
It looks like we are supporting this at the moment, if not please reopen with an example project we can try?
@wcandillon @chrfalch were either of you able to get a local image asset to load on iOS?
It works perfectly on Android but on iOS the images don't get loaded. I know they're in the bundle because they work with a normal RN Image tag, it's only the skia useImage that's returning null and only on iOS. No matter how I format the URI it seems there's something preventing the image from being resolved on iOS.
The error in the useImage callback is simply [Error: Could not load data]