react-three-fiber / react-native not working

[ifNaNpass]

Hello React-Three-Fiber Team.

First of all huge fan of what you all are doing and this is my first post on github so please don't be too mad, if I do something out of the norm...

My problem:

I tried to transition one of my projects from web to phone ( in this case simulated Iphone devices from Apple Xcode with react-native ), by using the instructions from your main page ( https://docs.pmnd.rs/react-three-fiber/getting-started/installation ). The thing is I get no errors, but still get a blank white screen and whatever I do, I can't get it to run. Even by copying examples ( https://snack.expo.dev/@bacon/728f26?platform=ios ).

Instructions used:

npx create-expo-app
expo install expo-gl
npm install three @react-three/fiber

• ( example code for the scene from the main page )

My dependencies:

"dependencies": { "@react-three/fiber": "^8.3.1", "expo": "~46.0.7", "expo-gl": "~11.4.0", "expo-status-bar": "~1.4.0", "react": "18.0.0", "react-native": "0.69.4", "three": "^0.143.0" }

I know this might be a stackoverflow question, but I though the official documentations might not be up to date and so it would be more helpful for other people to post it here.

[CodyJasonBennett]

Sorry for the delay, looking into this. I'll double-check our docs, but in the meantime, you can consult https://github.com/CodyJasonBennett/r3f-native-starter.

[gokhanmeteerturk]

I have the same problem with latest react native and react-three-fiber. Downgraded to these, but still doesn't work:

        "@react-three/fiber": "^8.3.0",
        "expo": "~46.0.9",
        "expo-gl": "~11.4.0",
        "react": "18.0.0",
        "react-native": "0.69.5",
        "three": "^0.143.0"

[Frit]

The example https://snack.expo.dev/@bacon/728f26?platform=ios fails:

upd: used https://docs.pmnd.rs/react-three-fiber/getting-started/installation#react-native instructions and got the same result as @ifNaNpass:
an empty white screen without errors

  "dependencies": {
    "@react-three/fiber": "^8.7.2",
    "expo": "~46.0.9",
    "expo-gl": "~11.4.0",
    "expo-status-bar": "~1.4.0",
    "react": "18.0.0",
    "react-native": "0.69.5",
    "three": "^0.144.0"
  }

in addition tested it on bare RN, got same result again

[kkmishra9114]

Any update or any solution how to resolve blank screen or show 3d view in react native. canvas tag is working but inside canvas -> mesh is not working ...in newly created expo project is working fine... but expo cli with react native cli not working.

[radik909]

I am facing the same issue -> Just white blank screen in IOS simulator. In Android device it is working fine.

    "@react-three/drei": "^9.58.5",
    "@react-three/fiber": "^8.12.0",
    "expo": "~48.0.9",
    "expo-gl": "~12.4.0",
    "react": "18.2.0",
    "react-native": "0.71.4",
    "three": "^0.150.1"

[CodyJasonBennett]

See #2546 (comment) for the discrepancy on Apple simulators.

[lucascassiano]

Any solutions for this issue? I'm having the same issue.
It works on the web view, but not on the ios emulator

Package.json

"@expo/webpack-config": "^18.0.1",
"@react-three/fiber": "^8.13.5",
"expo": "~48.0.18",
"expo-gl": "^13.0.1",
"expo-status-bar": "~1.4.4",
"expo-three": "^7.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.8",
"react-native-web": "~0.18.10",
"react-three-fiber": "^5.0.0-beta.12",
"three": "^0.154.0"

Warnings

 WARN  Scripts "build/three.js" and "build/three.min.js" are deprecated with r150+, 
and will be removed with r160. Please use ES Modules or alternatives: 
https://threejs.org/docs/index.html#manual/en/introduction/Installation