# Using BabylonJS with React Native

**URL:** <https://forum.babylonjs.com/t/using-babylonjs-with-react-native/3931>\
**Category:** Questions\
**Tags:** documentation, react\
**Created:** [June 17, 2019, 1:29pm UTC](https://forum.babylonjs.com/t/using-babylonjs-with-react-native/3931 "2019-06-17T13:29:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bberak](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bberak/32/2959_2.png) [@bberak](https://forum.babylonjs.com/u/bberak)\
**Post date:** [June 17, 2019, 1:29pm UTC](https://forum.babylonjs.com/t/using-babylonjs-with-react-native/3931/1 "2019-06-17T13:29:26Z")

</div>

Hi folks,

I’m working on a proof of concept where I’m porting (monkey patching) BabylonJS to work with React Native (Expo in particular).

This is somewhat possible because React Native / Expo exposes a WebGLRenderingContext that I use to create the BabylonJS engine.

I have a basic example working with a spinning cube mesh and an animated sprite. My next task is to get the GLTF Loader working.

That said, I’m having a fair bit of difficulty in this regard. Currently, to get sprites working, I created a custom texture loader and added it to the engine via `Engine._TextureLoaders.push(reactNativeTextureLoader);`

Is there something similar I can do with mesh/scene loading? I’m trying to monkey patch the `Tools.LoadFile` and `OfflineProviderFactory (Database)` modules but am getting quite confused because the code execution is jumping all over the place.

Is there any documentation regarding extending BabylonJS, overriding loaders (GLTF loaders in particular). Or has someone tried doing something similar before - I’d hate to re-invent the wheel…

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [June 17, 2019, 4:01pm UTC](https://forum.babylonjs.com/t/using-babylonjs-with-react-native/3931/2 "2019-06-17T16:01:58Z")

</div>

Hey! and welcome 😉

So you can already ignore OfflineProviderFactory by just turning off database support. This will not be a big deal

Regarding glTF loading, why do you need to change it? I though Reactnative came with a XHR replacement (Maybe I’m completely wrong)

---

<div class="post-metadata">

**Author:** ![bberak](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bberak/32/2959_2.png) [@bberak](https://forum.babylonjs.com/u/bberak)\
**Post date:** [June 18, 2019, 2:01am UTC](https://forum.babylonjs.com/t/using-babylonjs-with-react-native/3931/3 "2019-06-18T02:01:04Z")

</div>

Thanks @Deltakosh,

How do I go about turning off offline support? I tried `Database.IDBStorageEnabled = true;` however the following code still seems to get executed `window.location.href` which throws an error.

I’ve also tried doing this: `Engine.OfflineProviderFactory = null;`, which seems to circumvent the Database code, but I get a strange error that I’m struggling to catch: `[Unhandled promise rejection: Error: Could not download from 'data:EnvironmentBRDFTexture']` - the stack trace isn’t useful as it’s quite short and has no references to BabylonJS.

I should note that I’m trying to load a simple .glb file using the following code:

`try { await SceneLoader.AppendAsync(asset.localUri, null, scene); //-- asset.localUri is in the format: file://path-to-a-file/model.glb } catch (err) { console.error(err); }`

RN does indeed have XHR support. So ideally, I can leave the loader as is 🙂

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [June 18, 2019, 2:45pm UTC](https://forum.babylonjs.com/t/using-babylonjs-with-react-native/3931/4 "2019-06-18T14:45:48Z")

</div>

To turn DB storage off, just call `engine.enableOfflineSupport = false`

---

<div class="post-metadata">

**Author:** ![bberak](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bberak/32/2959_2.png) [@bberak](https://forum.babylonjs.com/u/bberak)\
**Post date:** [June 20, 2019, 12:41am UTC](https://forum.babylonjs.com/t/using-babylonjs-with-react-native/3931/5 "2019-06-20T00:41:39Z")

</div>

Hi @Deltakosh,

When I set `engine.enableOfflineSupport = false;` something internally still calls the `Database.open` and `Database.loadFile` functions.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [June 20, 2019, 2:45pm UTC](https://forum.babylonjs.com/t/using-babylonjs-with-react-native/3931/6 "2019-06-20T14:45:46Z")

</div>

> [@bberak](#):
>
> enableOfflineSupport

This is weird because based on that code, the provider should not be instantiated:

> <https://github.com/BabylonJS/Babylon.js/blob/ea8a810bc385c5c5f26163c6833749a80e223a16/src/Loading/sceneLoader.ts#L444>
