React Native local image

Questions
,
1

Hi,
How to use local image for creating a Texture in Ract Native application?

2

cc @BabylonNative

3

I think @Cedric looked into this a bit.

4

Here is an example that load a texture from local resources:

3 Likes
5

Hey, as per the example resolveAssetSource(require()).uri* is working fine in debug mode. But in release mode it did’t work.

6

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.

2 Likes
7

Hey @inteja hope you are doing well. Can you please share me an example on how you are wrapping base64 in JSON.
Thank You…

8

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.

9

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);
2 Likes