React-three-fiber: Does react-three-fiber work with React Native sans Expo?

[Natetronn]

Hi, 👋

Docs seems sparse (non-existent; unless I just totally missed it?) in regards to React Native and I haven't had much success finding articles on the topic that aren't building with React.js itself. In fact, just about every article/example I've seen for react-three-fiber is using ReactDom to render. The one React Native example I've found is using it with Expo, which I'm not using.

What I tried so far gives me the following error:

error: Error: Unable to resolve moduleexpo-glfromnode_modules/react-three-fiber/native.js: expo-gl could not be found within the project.

I could be wrong but, doesn't appear expo-gl can be used outside of Expo.

That said, I'm wondering if react-three-fiber can be used with React Native without using expo too?

Thanks!

[Natetronn]

Of course, right after I wrote the previous comment, I found this:

https://github.com/react-spring/react-three-fiber/blob/master/recipes.md#usage-with-react-native

I'll keep researching if I can use expo-gl without Expo.

[proteche]

any example/working example for React native (android)? will be helpful....
I tried some examples which works fine for "React native web" but not on android? @Natetronn

[Natetronn]

I tried installing expo-gl and going down the line of the dependencies it said it needed and what I could figure out from various docs but, in the end I gave up.

There are many tutorials on using three and expo three out there. On medium and on youtube etc. I just wasn't using Expo to begin with so, probably why I was running into issues.

This is the only example I've found on react-three-fiber:

https://github.com/birkir/react-three-fiber-examples
https://github.com/react-spring/react-three-fiber/issues/212

I run into the above error using those examples and after installing three and react-three-fiber so, I'm thinking react-three-fiber can't be used with out the Expo at this point.

[MillerGregor]

@Natetronn,
You'll need the Expo dependencies, but you can use react-three-fiber in an "unmanaged" project... one created by react-native init. The react-native-unimodules dependency takes a bit of manual setup for ios and android.
The easiest path might be creating an Expo project then ejecting.

[Natetronn]

@MillerGregor thank you!

I installed unimodules but, not sure I had it setup correctly. I may have got to that point and quit, as it was looking like a headache. I don't remember, though. I may keep trying when I have a bit more time to work on it and not up late doing it.

I've considered moving to Expo, either way but, I haven't needed it up to this point, ironically. Often people have to eject at some point so, I find it kind of funny I'm having to "inject" lol

Anyway, thanks again!

[matttturnbull]

Yeah I had similar luck to @Natetronn, I did manage to get things working in RN0.61 (iOS at least) with the following packages:

"expo": "~37.0.3", "expo-gl": "^8.3.1", "expo-splash-screen": "^0.2.3", "expo-three": "^5.5.1", "expo-updates": "~0.2.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "~0.61.5", "react-native-unimodules": "~0.9.0", "react-native-web": "~0.11.7", "react-three-fiber": "^4.2.11", "three": "^0.117.1"

...But tried to repeat with a fresh RN0.62/0.63 project, and quickly fell into issues with the expo modules:

The "UMNativeModulesProxy" native module is not exported through NativeModules; verify that @unimodules/react-native-adapter's native code is linked properly

It would be really nice if a version of this awesome module could be created for RN that better supports an ejected app. 🙏🏼

[aestrro]

I am impressed with this project as well, and would love to have this experience without expo. Also, I see that this ticket is still open, does that mean that this may be something that is possible?

[drcmda]

i don't know much about anything about RN, but if you figure something out we could add this to the docs. otherwise, is there something that can be done here to make the process easier?