Blank/white screen with react-three-fiber, iOS, and React Native

[AndrewRayCode]

Example project: https://github.com/AndrewRayCode/expo-react-native-test

To run, run the iOS simulator, then:

npm install
npx expo install expo-gl
npm run ios

My App.js:

import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber/native';
import { useGLTF } from '@react-three/drei/native';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello, world!</Text>
      <Canvas>
        <ambientLight />
        <mesh>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
      </Canvas>
    </View>
  );
}

This renders a blank screen. Doesn't matter if I remove <View> and/or <Text>, no scene renders, just a white screen:

This is after following the instructions on https://docs.pmnd.rs/react-three-fiber/getting-started/installation#react-native

I also get one of the same warnings (shown in the screenshot) as #2823

[CodyJasonBennett]

Have you tested on device? Unfortunately OpenGL doesn't render on XCode emulator with expo-gl.

[psavich]

I have the same problem with example project above, and with my test project - blank screen instead of the Canvas. Both in Simulator and on the device.

Anyone was able to resolve this?

    "@react-three/drei": "^9.88.5",
    "@react-three/fiber": "^8.15.5",
    "expo": "~49.0.15",
    "expo-gl": "~13.0.1",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "three": "^0.157.0"

[satyajitghana]

same here