iOS: VR scene rendering blank screen

[Sukensie]

360° VR Image Displays Blank on iOS but Works Fine on Android

Issue Description

I'm experiencing an issue where a Viro360Image component displays correctly on Android devices but shows a completely blank screen on iOS devices (iPhones). The console logs confirm that the image has successfully loaded on both platforms, yet the 360° image is not visible on iOS.

Environment

• @reactvision/react-viro: ^2.50.0
• Expo SDK: ~54.0.30
• React Native: 0.81.5
• React: 19.1.0
• Development Client: expo-dev-client ~6.0.20
• New Architecture: Enabled (newArchEnabled: true)

Platform Details

Platform	Behavior
Android	✅ Works perfectly - 360° image displays correctly
iOS	❌ Blank screen - image loads but doesn't display

iOS Configuration (app.json)

"ios": {
  "supportsTablet": true,
  "bundleIdentifier": "com.anonymous.expo-starter-kit-typescript",
  "infoPlist": {
    "NSPhotoLibraryUsageDescription": "Starter Kit would like to read photos for AR experiences.",
    "NSPhotoLibraryAddUsageDescription": "Allow $(PRODUCT_NAME) to save photos",
    "NSCameraUsageDescription": "Starter Kit uses your camera for AR experiences.",
    "NSMicrophoneUsageDescription": "Starter Kit uses your microphone for AR experiences.",
    "GARAPIKey": "Your Google Cloud API Key",
    "NSLocationWhenInUseUsageDescription": "Allow $(PRODUCT_NAME) to use your location for AR experiences",
    "NSLocationAlwaysAndWhenInUseUsageDescription": "Allow $(PRODUCT_NAME) to use your location for AR experiences",
    "ITSAppUsesNonExemptEncryption": false
  }
}

Viro Plugin Configuration

"@reactvision/react-viro": {
  "android": {
    "xRMode": "AR"
  },
  "ios": {
    "cameraUsagePermission": "Starter Kit uses your camera for AR experiences.",
    "microphoneUsagePermission": "Starter Kit uses your microphone for AR experiences.",
    "photosPermission": "Starter Kit would like to read photos for AR experiences.",
    "savephotosPermission": "Starter Kit would like to save photos to your library during AR experiences."
  },
  "googleCloudApiKey": "Your Google Cloud API Key",
  "cloudAnchorProvider": "arcore",
  "geospatialAnchorProvider": "arcore"
}

Current Behavior

1. On Android: The 360° panoramic image displays perfectly, user can look around
2. On iOS: The screen remains completely blank (black), despite logs showing successful image load
3. Console logs on both platforms show:
   • Image load started
   • Image successfully loaded!
4. No error callbacks are triggered on iOS
5. The ViroText component also doesn't appear on iOS (suggesting the entire scene may not be rendering)

Expected Behavior

The 360° panoramic image should display on iOS devices exactly as it does on Android devices, allowing users to look around the virtual environment using the stereoscopic view (each eye separate image).

Code

Scene Component (Simple360Scene.tsx)

import React from "react";
import { ViroScene, Viro360Image, ViroText } from "@reactvision/react-viro";

const Simple360Scene = () => {
  const handleLoadStart = () => {
    console.log('Image load started');
  };

  const handleLoadEnd = () => {
    console.log('Image successfully loaded!');
  };

  const handleError = (event: any) => {
    console.error('Image load ERROR:', event);
  };

  return (
    <ViroScene>
      <Viro360Image 
        source={require('@/assets/images/360-room.png')}
        onLoadStart={handleLoadStart}
        onLoadEnd={handleLoadEnd}
        onError={handleError}
      />
      
      <ViroText
        text="Look around!"
        scale={[0.5, 0.5, 0.5]}
        position={[0, 0, -2]}
        style={{
          fontFamily: "Arial",
          fontSize: 30,
          color: "#FFFFFF",
          textAlignVertical: "center",
          textAlign: "center",
        }}
      />
    </ViroScene>
  );
};

export default Simple360Scene;

Index file (index.tsx)

import React from 'react';
import { StyleSheet } from 'react-native';
import { ViroVRSceneNavigator } from '@reactvision/react-viro';
import Simple360Scene from '@/components/vr-scenes/Simple360Scene';

export default function ARHome() {
  return (
    <ViroVRSceneNavigator
      initialScene={{ scene: Simple360Scene }}
      style={styles.container}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Steps to Reproduce

1. Install the expo starter kit
2. Add the included snippet file into @/components/vr-scenes/Simple360Scene.tsx
3. Replace the index file with provided snippet
4. Add a placeholder png into your assets/images folder
5. Install dependencies

   npx expo run:ios

6. Open the app on your iPhone
7. Check console logs - they show successful image load on both platforms

Device Information

Android (Working)

• Device: Samsung S10
• Android Version: 12
• Result: Image displays correctly

iOS (Not Working)

• Device: iPhone 14 Pro
• iOS Version: 18.7.2
• Result: Blank screen despite successful load

Additional Investigation

Things I've Verified:

• ✅ Image file exists at the correct path (@/assets/images/360-room.png)
• ✅ Image loads successfully (confirmed by onLoadEnd callback)
• ✅ No errors in onError callback
• ✅ ViroVRSceneNavigator is properly initialized
• ✅ Camera permissions are granted on iOS
• ✅ New Architecture is enabled in app.json

Potential Issues:

1. Could this be related to the New Architecture (newArchEnabled: true) on iOS?
2. Is there a specific iOS rendering configuration needed for Viro360Image?
3. Could the image format/size be incompatible with iOS despite loading successfully?
4. Is there a difference in how ViroVRSceneNavigator renders scenes on iOS vs Android?

Questions

1. Has anyone else experienced this issue with iOS and Viro360Image?
2. Are there any specific iOS configurations or permissions needed for VR scenes?
3. Could this be related to React Native 0.81.5 or the New Architecture on iOS?
4. Is there a known workaround or fix for this issue?