react-three-fiber / react-native not working

[ifNaNpass]

trafficstars

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

[RtistiQ-admin]

Hello there am also not able to run react native app. Error : When trying to use UI elements of 'three/fiber' [canvas,etc..] TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[16], "expo-gl").GLView')

Package.json

"dependencies": {

   "@react-three/drei": "^9.32.3",
   "@react-three/fiber": "^8.8.7",
   "expo-gl": "^11.4.0",
   "expo-modules-core": "^0.11.5",
   "react": "18.0.0",
   "react-native": "0.69.6",
   "three": "^0.145.0"
 },
 "devDependencies": {
   "@babel/core": "7.19.3",
   "@babel/runtime": "7.19.0",
   "@react-native-community/eslint-config": "2.0.0",
   "babel-jest": "26.6.3",
   "eslint": "7.32.0",
   "jest": "26.6.3",
   "metro-react-native-babel-preset": "0.70.3",
   "react-test-renderer": "18.0.0"
 },

metro-config.js

  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
    assetExts: ['svg','glb', 'gltf', 'png', 'jpg'],
  },
};

Node version : v16.17

[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 https://github.com/pmndrs/react-three-fiber/issues/2546#issuecomment-1587381648 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