Warning: React Native is no longer supported

[boycce]

My colleague and I have attempted to get a basic React Native example working without any success. Here is my process of attempting to follow the React Native example in the Readme.

Example project: https://github.com/boycce/r3f-native-example

/**
 * Dependencies:
 *  - @react-three/fiber    8.18.0
 *  - react                 18.3.1
 *  - react-native          0.76.9
 *  - three                 0.175.0
 *  - expo                  52.0.46
 *  - expo-gl               15.0.5
 */

Steps:

1. npm i expo-cli -g
2. expo init my-app
3. npm install three @react-three/fiber@8 (react 18 already installed from expo init)
4. Copied over the App setup into App.js
5. npx expo start

I then received the following error:

Unable to resolve "expo-gl" from "node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.prod.js"

6. npm i expo-gl
7. I then attempt to start it again and it shows a blank screen on Expo Go on my iPhone

---

Incorrect Readme:

If React Native is supported, could a maintainer please add a working example or an updated Expo Snack using React 18

[boycce]

Related https://github.com/pmndrs/react-three-fiber/issues/3399#issuecomment-2699329714, it seems Expo 52 is not currently supported

[gmenih]

@boycce are you able to get it working in older versions? That doesn't seem to work for me either - at least, when starting from create-expo-app, and then downgrading.

[JustFly1984]

Is there a way to use react three fiber without expo? I'm really concerned at this point, had no success in running react-three-fiber with expo. It seems to load THREE more than once, and fails with .trim() of undefined in three.js firstRun function.

[khaledOghli]

anyone find any solution !!!

[Rakha112]

Hey, maybe you can try this out react-native-3D-Example, I tested it with this PR #3539 and it works on both iOS (Real device, not simulator) and Android using Expo 53.0.11, React Native 0.79.3, and React 19.0.0.

Android	iOS

[JustFly1984]

@Rakha112 Doesn't work for me in cloned project - Errors are similar to other project - three.js imported more than once, and a new one:

 WARN  WARNING: Multiple instances of Three.js being imported.
 ERROR  THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}
 ERROR  THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}
 ERROR  THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}
 WARN  THREE.WebGLRenderer: WEBGL_lose_context extension not supported.
 WARN  THREE.WebGLRenderer: EXT_color_buffer_float extension not supported.

Nothing works.

Hey, maybe you can try this out react-native-3D-Example, I tested it with this PR #3539 and it works on both iOS and Android using Expo 53.0.11, React Native 0.79.3, and React 19.0.0.

Android iOS

[Rakha112]

@JustFly1984 Is the model not rendering on your side? As far as I know, this warning usually indicates that the GLTF loader failed to load the texture, so we can try loading it manually using useTexture

ERROR  THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}
ERROR  THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}
ERROR  THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}

Also, this is just a warning, not an actual error — although I’m still not sure what’s causing the “Multiple instances of Three.js being imported” message.

WARN  WARNING: Multiple instances of Three.js being imported.
WARN  THREE.WebGLRenderer: WEBGL_lose_context extension not supported.
WARN  THREE.WebGLRenderer: EXT_color_buffer_float extension not supported.

[JustFly1984]

@Rakha112 I made an issue in your repo: https://github.com/Rakha112/react-native-3D-Example/issues/1

yes, models not loading.

[JustFly1984]

To everyone - @Rakha112 repo is a solution. One main difference with web implementation - for some reason react-native + react-three-fiber stopped supporting Vector3 and Euler types for position and rotation properties. Had to refactor into [x, y, x] tuple.

[JustFly1984]

For some reason position props no longer support Three.Vector3 and Three.Euler types, but accepting Three.Vector3Tuple

Had to refactor a lot, due to runtime errors. Figured out and fixed WARN WARNING: Multiple instances of Three.js being imported. - solution in https://github.com/Rakha112/react-native-3D-Example/issues/1