react-three-fiber: 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!