Unable to use react-three-fiber with React Native

[haydenlinder]

Hi there.

First of all, thank you for creating this project. I like it a lot!

I am trying to use r3f it to create an app with React Native that will at least work on iOS.

I have tried using the setup prescribed

• here https://github.com/pmndrs/react-three-fiber/blob/master/recipes.md#usage-with-react-native,
  • Bootstrap (hangs on 'Loading project files')

    npx create-react-native-app -t with-react-three-fiber

• • Manual Setup (works in browser but shows blank page on physical iOS)

    # Install the Expo CLI
    npm i -g expo-cli

    # Create a new project
    expo init myapp
    cd myapp

    # Install packages
    yarn add expo-gl expo-three three@latest react-three-fiber@beta

    # Start the project
    yarn start

• here https://github.com/expo/examples/tree/master/with-react-three-fiber#-how-to-use (hangs on 'Locating project files')

    npx create-react-native-app my-app -t with-react-three-fiber

• and here https://github.com/expo/expo-three#quick-start (same as above)

    npx create-react-native-app -t with-react-three-fiber

Here's the code I have in App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Canvas } from 'react-three-fiber';
import { StyleSheet, Text, SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Canvas>
        <ambientLight/>
        <mesh>
          <boxBufferGeometry args={[1,1,1]}/>
          <meshPhysicalMaterial color='blue'/>
        </mesh>
      </Canvas>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I have also tried downloading this repo https://github.com/birkir/react-three-fiber-examples, which throws an error even after installing dependencies.

The README of r3f claims that react-three-fiber can be used with React Native but you mention in other issues that you are not familiar with React Native and there is currently no working downloadable demo for React Native.

Could you please provide a React Native demo that works on iOS/Android or remove the statement that the library can be used with React Native? Otherwise it is very confusing.

Please let me know if there's more info I can provide that would help.

Thanks!

[drcmda]

The RN layer came in by contrib and i see people using it practically all day. Expo has also just officially made a template for it, @EvanBacon made his bowser lego-bricks demos with it. It seems that the expo template is outdated, though.

It just needs more contributors. If you know RN well please try to get barebones expo-gl running, if that works, so must r3f - and if there's a problem with the r3f-RN layer (which is only about emulating pointer events) then we need someone to fix it - but it seems like it's more about expo dependencies now.

[haydenlinder]

I was able to get it working! Here is a very simple working snack - https://snack.expo.io/@haydenlinder/react-native-&-react-three-fiber

Feel free to reference it in the docs.

However, it seems that there is still not a good way to load 3D models (glb, gltf) across platforms. See this related issue expo/expo-three#182

I wish I knew where to start but I am new to mobile development myself. If you have any ideas I'd love to hear them.

[drcmda]

that is also something i see people do so there must be a solution but this all on expo. threejs is a web project and their loaders don't even run under node because they rely on web fetch and stuff like that. expo has their own loader, although, for some reason they don't adhere to the loaders spec, see: expo/expo-three#171 if they did you could readily use useLoader.

[drcmda]

@haydenlinder could you write down your findings? let's make a small markdown/react-native.md to make the process easier. i think in there should also be a small section explaining how controls and loaders differ.

[haydenlinder]

Agreed. I'll try to make a pull request this week.

[Daavidaviid]

Any news about that ?

[haydenlinder]

Sorry, I had to put this aside and I don't think I'll be able to contribute right now.

However, I recently talked to a company who is using THREE in their React Native app and they said they use a webview to wrap their canvas, so that is possibly a solution to the problem, but I don't have implementation specifics.

Anyway feel free to close this issue but I still strongly recommend updating the docs for React Native with some working examples if the readme claims support for it.

[polymorpher]

I got my react-native (iOS) project to work and we didn't need to wrap Canvas with WebView. It took a lot of debugging to figure things out, but more on how it works, not to fix anything. The authors of react-three-fiber really did a great job for multi-platform support. I would be happy to write a doc or two when our project slows down and I get a bit of free time :)

[joshuaellis]

To summarise for anyone wanting to pick this up, the react-native docs could do with some love & probably regular upkeep since it changes to so much.

[iWhacko]

@polymorpher I'm having trouble running native on iOS aswell, could you perhaps share your steps? I get blank screen, while my scene works fine in WEB.

[johnmarinelli]

when i try to use expo init, and install r3f & others manually, i can't get a working project. however, npx create-react-native-app -t with-react-three-fiber works consistently for me

[johnmarinelli]

this might be because the expo GLView doesn't work when using remote debugging: https://github.com/expo/expo/blob/master/packages/expo-gl/src/GLView.tsx#L519

so one thing to make sure is that your remote debugging is off when running your app. otherwise you may get a blank screen

[iWhacko]

For me I found out what the issue is, I link to images from a "Material", they are not being loaded, so my mesh is blank. Haven't figured out how to load them properly on iOS though.

EDIT: Another full day of messing around, and I still only get a white cube. I can set the color of MeshBasicMaterial and get a different color. But I can't find a way to show textures. Still works fine on WEB :/
I'm getting really frustrated :/

[polymorpher]

@iWhacko Can you post some code on a sandbox? I can take a look. Also make sure you are not loading a model with texture. See expo/expo-three#144. It took me a while to get it working so it's a bit hard to describe that step-by-step. I was thinking of writing a tutorial / guide later after I wrap up a few projects.

[Je12emy]

Any updates? I would love to use Three Fiber for a project, instead of native app development.

[CodyJasonBennett]

We just launched a beta of fiber alongside react@beta including full react-native support (events, loaders, imperative render API, etc.). Install instructions here -- nothing special for expo/bare apps.

I'd like to add docs more specific to react-native, as there are some pitfalls when working with three. Generally, as long as your models are packed, loaders won't try to fetch images that don't exist along an absolute path. DRACO I'm not sure we can support. We don't polyfill anything, but maybe we should.

[CodyJasonBennett]

I sent over a PR to update the expo example, but that repo seems inactive. In the meantime, you can find installation instructions on https://docs.pmnd.rs/react-three-fiber/getting-started/installation. I'll be working on adding react-native tutorials and examples as we streamline the docs site.

Closing now that native support is stable and released with v8 beta.