No render on iOS simulator

[MykhailoButkevych-MR]

There's an issue with rendering on iOS, no problem with Android though.
My setup: iPhone 12 Simulator, iOS 14.3, XCode 14, Intel cpu

Steps to reproduce:

1. Project setup, script sequence:

npx create-expo-app
cd my-app
npx expo install expo-gl
npm install three @react-three/fiber

2. Add this code into App.tsx:

import * as React from 'react'
import { SafeAreaView } from 'react-native'
import { useFrame, Canvas } from '@react-three/fiber'

function Box() {
  const box = React.useRef()
  useFrame(() => (box.current.rotation.x = box.current.rotation.y += 0.01))
  return (
    <mesh ref={box}>
      <boxGeometry args={[1, 1, 1]} />
      <meshPhysicalMaterial color="blue" />
    </mesh>
  )
}

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Canvas>
        <ambientLight />
        <pointLight position={[-1, 1, 1]} castShadow />
        <Box />
      </Canvas>
    </SafeAreaView>
  )
}

3. Run yarn ios

As a result there's just an empty white screen, no rotating blue cube.

[krisidmisso]

@MykhailoButkevych-MR just had the same issue. Can confirm that it doesn't work on a simulator but it works on a real device.

[vinaciotm]

There's an issue with rendering on iOS, no problem with Android though. My setup: iPhone 12 Simulator, iOS 14.3, XCode 14, Intel cpu

Steps to reproduce:

1. Project setup, script sequence:

npx create-expo-app
cd my-app
npx expo install expo-gl
npm install three @react-three/fiber

2. Add this code into App.tsx:

import * as React from 'react'
import { SafeAreaView } from 'react-native'
import { useFrame, Canvas } from '@react-three/fiber'

function Box() {
  const box = React.useRef()
  useFrame(() => (box.current.rotation.x = box.current.rotation.y += 0.01))
  return (
    <mesh ref={box}>
      <boxGeometry args={[1, 1, 1]} />
      <meshPhysicalMaterial color="blue" />
    </mesh>
  )
}

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Canvas>
        <ambientLight />
        <pointLight position={[-1, 1, 1]} castShadow />
        <Box />
      </Canvas>
    </SafeAreaView>
  )
}

3. Run yarn ios

As a result there's just an empty white screen, no rotating blue cube.

this works on real device iphone 13 (results on spining blue cube on screen)

[an0tv]

Reproduced @MykhailoButkevych-MR code, ran it and experienced the same issue. However, I am not getting any sort of rendering on my iOS device when using expo go. My device is the iPhone 12 mini.

(Edit)
Turns out it was a problem with some of the dependencies and downgrading fixed the issue.

[hypekn1ght]

I've been getting this too personally.

So just to clarify, is this the best pathway to rendering properly?:

eas dev build -> adhoc provisioning -> install eas build on real iOS device?

[CodyJasonBennett]

This is an upstream issue with expo-gl and XCode. Unfortunately, OpenGL was deprecated on Apple platforms, so this won't work without a Metal adapter or better -- ANGLE/WebGPU.

[lucascassiano]

Then.. what should I do? Just test on iOS devices instead?

[darimuhittinhey]

This is an upstream issue with expo-gl and XCode. Unfortunately, OpenGL was deprecated on Apple platforms, so this won't work without a Metal adapter or better -- ANGLE/WebGPU.

Does this mean the library will not work on ios devices? @CodyJasonBennett

[CodyJasonBennett]

Then.. what should I do? Just test on iOS devices instead?

Yes. I better explain why below.

Does this mean the library will not work on ios devices?

That's not what that means at all. XCode simulator will not push frames on OpenGL which is now deprecated on Apple platforms. Try on a real device if you can, otherwise, if this affects quality control I'd reconsider the use of this library (and by extension expo-gl) for the moment.

I've been working on moving everything to wgpu/Metal for several years now, but with the lack of support from react-native, I'm afraid there's not much one can do.

[jacopocolo]

This might be known already but I'll add a small trick I found: if you have a M1/M2/M3 Mac, you can build from XCode using "My Mac (Designed for iPhone)" as a target and the app will install on your Mac, open and render r3f properly.

It doesn't replace building and testing on device, of course. But it might be useful for testing and debugging — more useful than the simulator at least.

[CodyJasonBennett]

I think we should be documenting this. It's unfortunate that Apple is deprecating OpenGL since it also affects web (Chrome desktop) atm.