does not work with react native [npx react-native init]

[loekTheDreamer]

1. npx react-native init MyApp --template react-native-template-typescript
2. 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"
  },

3. pod install in ios folder
4. yarn ios just crashes
5. open project in xcode and run from there to see error
6. 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.

[CodyJasonBennett]

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.

[loekTheDreamer]

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:

1. yarn expo-gl
2. 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:

1. 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?

[CodyJasonBennett]

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.

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.

[RNEvok]

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...

[loekTheDreamer]

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?

[RNEvok]

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...

I also figured that app crashes only if I'm trying to render canvas. (Project builds successfuly and works fine until screen containing canvas shows up). Enabling Hermes didnt help. Same problem occures.

[CodyJasonBennett]

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.

[RNEvok]

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.

I've Downgraded RN version to 0.64.3 Re-installed react-three-fiber with R3F's react-native installation instructions

Similar issue appeared.

It's not quite clear for: do expo-packages support RN version higher than 0.64.3 with bare projects or they dont... Anyway, looks like EXC_BAD_ACCESS error is not connected with version compatibilities troubles.

"expo": ">=44.0.0-0 <45.0.0", "expo-gl": "~11.1.1", "react": "^18.0.0-rc.0", "react-native": "0.64.3"

[CodyJasonBennett]

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.

[loekTheDreamer]

@CodyJasonBennett thank you so much for looking into this. could you figure out the steps to make it work?

[xavax31]

Hi, did you finally get it to work with bare react native? I need it for a project, and prefer to check before proposing it.

[CodyJasonBennett]

I'm able to get this running by explicitly adding @latest to install-expo-modules:

npx react-native init MyApp

npx install-expo-modules@latest
expo install expo-gl expo-gl-cpp
yarn add three @react-three/fiber react

Can anyone else confirm on their end? Will try a few setups on Android/iOS in a moment.

[xavax31]

thanks for your quick answer!

[n-ext]

I'm able to get this running by explicitly adding @latest to install-expo-modules:

npx react-native init MyApp

npx install-expo-modules@latest
expo install expo-gl expo-gl-cpp
yarn add three @react-three/fiber react

Can anyone else confirm on their end? Will try a few setups on Android/iOS in a moment.

Doesn't work on iOS. App is blank when only canvas is used (should show 2 cubes rotating), with other elements (Text, View etc.) it crashes

[loekTheDreamer]

Hi, did you finally get it to work with bare react native? I need it for a project, and prefer to check before proposing it.

No unfortunately I haven’t. I did however decide to use a workaround: made a web version and then served it in a webView.

[xavax31]

thanks to everybody for yours answers! @loekTheDreamer, does your version in webview work correctly (no security problems or others) ? seems like a safer direction to me

[loekTheDreamer]

thanks to everybody for yours answers! @loekTheDreamer, does your version in webview work correctly (no security problems or others) ? seems like a safer direction to me

Yes the web version works exactly as expected… it actually works 😂

I didn’t really test secuirty, but I guess it depends on what your trying to do. I’m just using it to display some artwork so in my case there is not really any need for secuirty. Having said that, just like the security for react-three-fiber is expected your webView should have the same sort of secuirty.

What kind of security are you specifically requiring? Or could you define this a bit more.

[xavax31]

thanks to everybody for yours answers! @loekTheDreamer, does your version in webview work correctly (no security problems or others) ? seems like a safer direction to me

Yes the web version works exactly as expected… it actually works 😂

I didn’t really test secuirty, but I guess it depends on what your trying to do. I’m just using it to display some artwork so in my case there is not really any need for secuirty. Having said that, just like the security for react-three-fiber is expected your webView should have the same sort of secuirty.

What kind of security are you specifically requiring? Or could you define this a bit more.

Fine! For security, sorry, my point was not clear. I'm not talking about more security, but blocking issues due to responsive web view security rules and constraints. I haven't used the webview much other than loading simple html pages. But apparently not :)