react-three-fiber React native new architecture not showing anything

trafficstars

Im trying to run @react-three/fiber in a new expo project that is using the new architecture, but it does not show anything and when adding object like lighting it causes threejs to throw cannot read trim of undefined

it renders on web and android

I created a repro repo here: https://github.com/jb-san/expo-52-three-fiber run:

npm I
npm run ios

it has 3 pages

using expo-gl and only threejs (works)
using expo-three (works, but it does have a dependency on a lower threejs version, but even forcing the latest version works)
using @react-three/fiber/native, (doesn't work)

I can get the PureThree.tsx to not render anything if I remove the style:{} on line 14

Nov 21 '24 08:11 jb-san

trying to make a custom renderer like this

 <Canvas
      style={{ flex: 1, backgroundColor: "black" }}
      gl={(canvas) => {
        const gl = canvas.getContext("webgl", { antialias: false })!;
        const renderer = new THREE.WebGLRenderer({
          canvas: {
            powerPreference: "high-performance",
            antialias: true,
            alpha: true,
            width: gl.drawingBufferWidth,
            height: gl.drawingBufferHeight,
            style: {},
            addEventListener: (() => {}) as any,
            removeEventListener: (() => {}) as any,
            clientHeight: gl.drawingBufferHeight,
          },
          context: gl,
        });
        renderer.setPixelRatio(1);
        renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

        return renderer;
      }}
      style={{ flex: 1, backgroundColor: "red" }}
    >...

to mimic the way the renderer is created in PureThree.tsx does not work

Nov 21 '24 11:11 jb-san

Same issue

Nov 22 '24 07:11 anurbecirovic

After some digging, looks like it is running the renderer, updated my repo with an example where you can see that a useFrame is being called. I might be wrong, but I think there is something in the react-reconciler that is not working correctly with the new architecture

Nov 22 '24 14:11 jb-san

I have tried to find out why, but from logs it looks like the reconciler works, but I can not figure out why it wont render

Nov 23 '24 06:11 jb-san

Thank you for your example repo - very helpful to see it's not my setup fault. Is there any update? Having the same issue, but have to build up a new project using expo 52, but I am also in need of r3f. :/

Dec 02 '24 12:12 teubs

I keep investigating this on my free time, the only conclusion I have is that for some reason it does not manage to get its render target (canvas), don't know why yet, I also did a test where I updated to v9 of @react-three/fiber, and react 19, but that gave me a whole set of new errors from the its-fine provider, Ill update if I find a way

Dec 02 '24 23:12 jb-san

Can also reproduce the same issue on iOS. Running the exact same code on Web does work though.

Dec 10 '24 13:12 busybox11

https://github.com/user-attachments/assets/436b867f-3aff-4f4a-998b-bb36fc66d54f

It seams like the objects are there, the pointer events are there, but it does not render anything. My guess is that it has to do with the reconciler

Dec 11 '24 08:12 jb-san

Same issue :(

Dec 12 '24 00:12 cubevis

我也出现了同样的问题，expo@52 ，难道需要降成51吗？

Dec 17 '24 08:12 TF002

Same issue (and can also see that pointer events are active and being called). Thanks for setting up the repo to reproduce.

Jan 20 '25 00:01 pauljnoble

Is it possible to flag this as higher priority? Or nobody actually started a new project with new react native?

Jan 22 '25 10:01 dung-phan

This isn't a corporate support line but an issue tracker on open source software. There's no such thing as priority but opportunity rather. That's how open source software works. The issue lies upstream in expo-gl, but Expo themselves are not prioritizing graphics. If you want a company to reach out to or convey a business case, it would be with them. Here, and for now, work would be best effort but this is quite a Herculean one to maintain an entire graphics standard. I would strongly recommend a web view instead as I'm the only one to work in this area for some time, and the bedrock of react-native is extraordinarily primitive and yet brittle. You will not match performance or stability with either iOS Safari or Android engines in the current state of react-native, so I would only suggest it for enthusiast use.

Jan 22 '25 10:01 CodyJasonBennett

Thanks for commenting @CodyJasonBennett, I would like to try to help out and solve this, will look into expo-gl side, do you have any hunches on where to look ? in the repro repo that I posted I got it working with expo-gl and pure threejs but not working with react-three-fiber.

Edit: works on a real device, simulator crashes now for some reason, I suspect the simulator crashing is a expo-gl issue

Jan 23 '25 11:01 jb-san

some progress, I followed @CodyJasonBennett excellent article https://codyb.co/articles/a-technical-breakdown-of-react-three-fiber and made my own tiny fiber like and got it to render after some changes, oh and I also had the trim of undefined from threejs, which I patched manually in the node_modules https://github.com/jb-san/expo-52-three-fiber/tree/feature/baby3fiber now I just need to find exactly what changes are needed and if they can be implemented without breaking anything

Feb 05 '25 03:02 jb-san

some progress, I followed @CodyJasonBennett excellent article https://codyb.co/articles/a-technical-breakdown-of-react-three-fiber and made my own tiny fiber like and got it to render after some changes, oh and I also had the trim of undefined from threejs, which I patched manually in the node_modules

This still sounds very broken.

in the repro repo that I posted I got it working with expo-gl and pure threejs

I missed this. Let me take a closer look. We should be getting the same behavior with the following:

<Canvas gl={{ antialias: false, powerPreference: 'default' }} dpr={1} events={null} />

Feb 05 '25 16:02 CodyJasonBennett

I'm having the same issue for IOS, not sure if there is now a workaround for it?

Feb 20 '25 10:02 Drexregion

Ouch, I spent three evenings trying to figure what am I doing wrong. When I found this issue, it all started make sense.

Expo 52+ (with the new React Native) building for ios doesn’t support react-three-fiber at all.

At first, I was using a simulator instead of a real device — found out on some random site that I needed an actual device. Then, I hit an issue with react-three-fiber requiring React 19, which Expo doesn’t support. After tracking down compatible versions for some libs, I finally faced the "trim" problem.

It was unfixable but crashed less on a real device than on a simulator, so I assumed that was just problem of simulator. Anyway nothing was rendering and there was no other Errors that could help understand why. I spent the rest of the time just trying to render a single cube on the screen of iphone.

@CodyJasonBennett Is it possible to add a note in the docs while fix is in progress? For expo it’s broken right now, people could use older expo version or at least not waste their time

These are links related to the same issue. Initially, I only found the "trim" one but it wasn't very helpful to understand what's actually happening

https://github.com/pmndrs/react-three-fiber/issues/3397
https://github.com/pmndrs/react-three-fiber/issues/3333
https://www.reddit.com/r/reactnative/comments/1iaaon3/my_experience_with_expo_52_and_r3f_and_drei_rant/

Mar 05 '25 00:03 wandolch

@CodyJasonBennett Is it possible to add a note in the docs while fix is in progress? For expo it’s broken right now, people could use older expo version or at least not waste their time

This needs to be added this urgently. This has impacted our team.