React native new architecture not showing anything

[jb-san]

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

1. using expo-gl and only threejs (works)
2. using expo-three (works, but it does have a dependency on a lower threejs version, but even forcing the latest version works)
3. 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

[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

[anurbecirovic]

Same issue

[jb-san]

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

[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

[teubs]

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. :/

[jb-san]

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

[busybox11]

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

[jb-san]

strange.mov

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

[cubevis]

Same issue :(

[TF002]

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

[pauljnoble]

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

[dung-phan]

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

[CodyJasonBennett]

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.

[jb-san]

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

[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

[CodyJasonBennett]

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} />

[Drexregion]

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