react-three-fiber
react-three-fiber copied to clipboard
react-three-fiber / react-native not working
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.
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.
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"
The example https://snack.expo.dev/@bacon/728f26?platform=ios fails:
![image](https://user-images.githubusercontent.com/7198193/188961687-85647d08-7ab5-47fa-89af-c98b8d5ee166.png)
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
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
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.
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"
See https://github.com/pmndrs/react-three-fiber/issues/2546#issuecomment-1587381648 for the discrepancy on Apple simulators.
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