Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React native new architecture not showing anything #3399

Open
jb-san opened this issue Nov 21, 2024 · 10 comments
Open

React native new architecture not showing anything #3399

jb-san opened this issue Nov 21, 2024 · 10 comments

Comments

@jb-san
Copy link

jb-san commented Nov 21, 2024

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
Copy link
Author

jb-san commented Nov 21, 2024

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
Copy link

Same issue

@jb-san
Copy link
Author

jb-san commented Nov 22, 2024

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
Copy link
Author

jb-san commented Nov 23, 2024

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
Copy link

teubs commented Dec 2, 2024

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
Copy link
Author

jb-san commented Dec 2, 2024

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
Copy link

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

@jb-san
Copy link
Author

jb-san commented Dec 11, 2024

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
Copy link

cubevis commented Dec 12, 2024

Same issue :(

@TF002
Copy link

TF002 commented Dec 17, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants