react-three-fiber: does not work with react native [npx react-native init]

npx react-native init MyApp --template react-native-template-typescript
following instruction on website:

npx install-expo-modules
expo install expo-gl
expo install expo-gl-cpp
yarn add three @react-three/fiber @beta react@rc @types/three

here is my package.json

  "dependencies": {
    "@react-three/fiber": "^8.0.0-beta.0",
    "@types/three": "^0.137.0",
    "expo": ">=44.0.0-0 <45.0.0",
    "expo-gl": "~11.1.1",
    "expo-gl-cpp": "~11.1.0",
    "react": "^18.0.0-rc.0",
    "react-native": "0.67.2",
    "three": "^0.137.5"
  },

pod install in ios folder
yarn ios just crashes
open project in xcode and run from there to see error
error: com.facebook.react.JavaScript (13): EXC_BAD_ACCESS (code=EXC_I386_GPFLT)

I’ve tested this in an expo project and it works fine. It just has issue with a npx react-native init it seems. Unfortunately i don’t have the luxury to eject from an expo project because I’ve been tasked to implement R3F into an existing project.

If anyone can assist or provide a working project using npx react-native init that would be much appreciated.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

AFAIK expo only tests against those listed versions, but it wouldn’t be a surprise if things were to silently break outside of that scope.

To clarify, this error is coming from expo-gl, seemingly because of a breaking change between react-native and expo (which install-expo-modules should take care of but isn’t). I think I’d try again with expo 43 (see my linked repo) before moving this issue upstream.

I’ll try to recreate manual install instructions from the linked repo (in place of install-expo-modules) if that is indeed the culprit.

CodyJasonBennett on Feb 19, 2022

Taking a look, I see that install-expo-modules won’t ensure that you have a compatible react-native version which for SDK 43-44 is 0.64.3. This is likely what’s contributing to the first reported error.

Start by making sure you have that version of react-native and then proceed with R3F’s react-native installation instructions. I have a repo here to compare with if anything’s suspect.

CodyJasonBennett on Feb 18, 2022

By manually installing expo-gl, I mean the instructions but where you go expo install expo-gl. That will install and link expo-gl and its dependencies.

@CodyJasonBennett I’m so confused. must i run expo install expo-gl or link it manually by running yarn add expo-gl and then running pod install? is there more steps i need to follow to link the dependency. Can you provide exact instructions?

The second error I think is more telling. expo-asset comes from the expo package (formerly unimodules). Maybe try installing expo via NPM and see if that resolves things.

So i must install expo-gl and then expo via npm in the folder? installing expo via npm produces this error when i run pod install:

[!] CocoaPods could not find compatible versions for pod "Expo":
  In Podfile:
    Expo (from `../node_modules/expo/ios`)

Im sorry but i dont understand what to do here what steps to follow to make this work. Can you provide a working project made with react-native init that i can see where i’m going wrong?

loekTheDreamer on Feb 18, 2022

Hello. I’ve got just the same problem. Looks like installation went correctly.

Project type: Bare RN RN version: 0.66.4 “expo”: “>=44.0.0-0 <45.0.0”, “expo-gl”: “~11.1.1”,

Already tried to clean (watchman, yarn, RN, project) caches. I’ll write if I find anything…

RNEvok on Feb 17, 2022

Thank you for your assistance @CodyJasonBennett unfortunately I’m still having some issues.

Try following the instructions 1-1 (only manually install expo-gl, my suspicion is that isn’t linking correctly). The only difference with the bare expo project is that it will link everything for you via expo and install w/pod for IOS via the CLI.

When you say manually install expo-gl do you mean these steps:

yarn expo-gl
cd ios then pod install? after following these steps i just tried to test the expo-gl package with a basic example then i get this error:

Unable to resolve module expo-modules-core from /Users/doris/Documents/myFolder/royal-protocol/testing/R3FGithubCodyJasonBennett/node_modules/expo-gl/build/GLView.js: expo-modules-core could not be found within the project or in these directories:
  node_modules

Are there more instructions to manually link expo-gl? I cant find any other manual linking instructions.

I then proceeded to following the rest R3F instructions: so after failed expo-gl install:

yarn add three @react-three/fiber@beta react@rc @types/three running a basic example gives the follolwing error:

Unable to resolve module expo-asset from /Users/doris/Documents/myFolder/royal-protocol/testing/R3FGithubCodyJasonBennett/node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.dev.js: expo-asset could not be found within the project or in these directories:
  node_modules/@react-three/fiber/node_modules
  node_modules

Any other suggestions?

loekTheDreamer on Feb 17, 2022