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 · 4 comments
Open

React native new architecture not showing anything #3399

jb-san opened this issue Nov 21, 2024 · 4 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

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

2 participants