Hi,
How to use local image for creating a Texture in Ract Native application?
I think @Cedric looked into this a bit.
Here is an example that load a texture from local resources:
Hey, as per the example resolveAssetSource(require()).uri* is working fine in debug mode. But in release mode it did’t work.
We ran into similar issues with release vs debug and different platform file handling. Eventually we just converted textures to base64 and wrapped that in a JSON file that we could directly import into the codebase. It works flawlessly across all target platforms in both release and debug builds.
Hey @inteja hope you are doing well. Can you please share me an example on how you are wrapping base64 in JSON.
Thank You…
A quite long discussion here : importing a .glb file fails if only local path is provided and not served through HTTP · Issue #165 · BabylonJS/BabylonReactNative · GitHub
For a project we also ended up doing base64 encoding. It was quite limited so not really an issue but it’s annoying in general. So, it’s still on our radar.
Welcome to the community @sayan
Here’s the approach I use in React Native TypeScript projects.
Convert PNG to Base64 using an online tool like Convert PNG to Base64 – Online PNG Maker
Create a simple JSON file to contain the Base64 data:
customTexture.json
{
"dataUri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
}
Import and use file as a texture:
createScene.ts
import customTexture from "path/to/customTexture.json";
...
material.diffuseTexture = new Texture(customTexture.dataUri, scene);