Unable to use react-three-fiber with React Native

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!

[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 😃

[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 https://github.com/expo/expo-three/issues/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.