# React Native local image

**URL:** <https://forum.babylonjs.com/t/react-native-local-image/37649>\
**Category:** Questions\
**Tags:** material, texture\
**Created:** [January 26, 2023, 12:27pm UTC](https://forum.babylonjs.com/t/react-native-local-image/37649 "2023-01-26T12:27:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Suman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/suman/32/33970_2.png) [@Suman](https://forum.babylonjs.com/u/Suman)\
**Post date:** [January 26, 2023, 12:27pm UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/1 "2023-01-26T12:27:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 26, 2023, 4:34pm UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/2 "2023-01-26T16:34:14Z")

</div>

cc [@BabylonNative](https://forum.babylonjs.com/groups/babylonnative)

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [January 27, 2023, 1:25am UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/3 "2023-01-27T01:25:47Z")

</div>

I think @Cedric looked into this a bit.

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [January 27, 2023, 1:22pm UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/4 "2023-01-27T13:22:51Z")

</div>

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

> <https://github.com/BabylonJS/SpacePiratesAR/blob/4a855844fefdede1205abeec7eb79cf61fdc7fc7/App.tsx#L110>

---

<div class="post-metadata">

**Author:** ![Suman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/suman/32/33970_2.png) [@Suman](https://forum.babylonjs.com/u/Suman)\
**Post date:** [January 30, 2023, 7:48am UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/5 "2023-01-30T07:48:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [January 30, 2023, 10:22am UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/6 "2023-01-30T10:22:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sayan](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@sayan](https://forum.babylonjs.com/u/sayan)\
**Post date:** [January 30, 2023, 11:39am UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/7 "2023-01-30T11:39:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [January 30, 2023, 2:14pm UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/8 "2023-01-30T14:14:51Z")

</div>

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](https://github.com/BabylonJS/BabylonReactNative/issues/165)

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.

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [January 31, 2023, 9:53am UTC](https://forum.babylonjs.com/t/react-native-local-image/37649/9 "2023-01-31T09:53:06Z")

</div>

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](https://onlinepngtools.com/convert-png-to-base64)

**Create a simple JSON file to contain the Base64 data:**

`customTexture.json`

```auto
{
    "dataUri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
}

```

**Import and use file as a texture:**

`createScene.ts`

```auto
import customTexture from "path/to/customTexture.json";
...
material.diffuseTexture = new Texture(customTexture.dataUri, scene);

```