xcode – React Native iOS Simulator Reveals Clean White Display screen – Works High-quality on Android

Downside Description

I’ve a React Native challenge that runs completely on Android, however exhibits solely a clean white display when working on iOS simulator. When constructing and working via XCode, I can see the app launches however solely shows a white display.

Setting Particulars

• React Native Model: 0.74.5 (upgraded from 0.69.3)
• iOS Improvement Goal: 13.4
• Node.js Model: v18.20.8 (through NVM)
• Platform: macOS Sonoma (x86_64)
• XCode: Constructing for iOS simulator
• Hermes: Enabled () hermesEnabled=true

Console Logs from XCode

warning: (x86_64) /Customers/emres/Library/Developer/Xcode/DerivedData/mobile_1969-gfeqbzlnxklpkbamfxhvupxmknzj/Construct/Merchandise/Debug-iphonesimulator/mobile_1969.app/mobile_1969 empty dSYM file detected, dSYM was created with an executable with no debug information.

Invalidating  (mum or dad: (null), executor: (null))

Didn't ship CA Occasion for app launch measurements for ca_event_type: 0 event_name: com.apple.app_launch_measurement.FirstFramePresentationMetric

Didn't ship CA Occasion for app launch measurements for ca_event_type: 1 event_name: com.apple.app_launch_measurement.ExtendedLaunchMetrics

nw_protocol_socket_set_no_wake_from_sleep [C2.1.1:2] setsockopt SO_NOWAKEFROMSLEEP failed [22: Invalid argument]

Challenge Configuration

AppDelegate.mm

- (BOOL)utility:(UIApplication *)utility didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTAppSetupPrepareApp(utility, false);
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"mobile_1969", nil, YES);
  
  if (@obtainable(iOS 13.0, *)) {
    rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
    rootView.backgroundColor = [UIColor whiteColor];
  }
  
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"principal" withExtension:@"jsbundle"];
#endif
}

Podfile (Key Components)

platform :ios, '13.4'
set up! 'cocoapods', :deterministic_uuids => false

# Hermes enabled
use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true,
  :fabric_enabled => flags[:fabric_enabled],
  :app_path => "#{Pod::Config.occasion.installation_root}/.."
)

Metro Config

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const defaultConfig = getDefaultConfig(__dirname);

const config = {
 transformer: {
   getTransformOptions: async () => ({
     remodel: {
       experimentalImportSupport: false,
       inlineRequires: true,
     },
   }),
   babelTransformerPath: require.resolve('react-native-svg-transformer'),
 },
 resolver: {
   assetExts: assetExts.filter(ext => ext !== 'svg'),
   sourceExts: [...sourceExts, 'svg'],
 },
};

module.exports = mergeConfig(defaultConfig, config);

index.js Entry Level

import React from 'react'
import 'react-native-gesture-handler'
import { AppRegistry } from 'react-native'
import App from './App'
import { title as appName } from './app.json'
import { Supplier } from 'react-redux'
import { retailer, persistor } from './src/retailer'
import { PersistGate } from 'redux-persist/integration/react'
import ErrorBoundary from './src/elements/error/ErrorBoundary'

const Software = () => (
  
    
      
        
      
    
  
)

AppRegistry.registerComponent(appName, () => Software)

Key Dependencies

{
  "react": "18.2.0",
  "react-native": "0.74.5",
  "react-native-gesture-handler": "^1.10.3",
  "react-native-screens": "3.27.0",
  "react-native-safe-area-context": "^1.0.0",
  "@react-navigation/native": "^5.3.0",
  "@react-navigation/stack": "^5.3.2",
  "react-redux": "^7.2.0",
  "redux-persist": "^5.10.0"
}

Steps Tried

1. ✅ Android: App runs completely – all UI elements and navigation work
2. ❌ iOS Simulator: Solely exhibits white/clean display
3. Clear builds: Deleted Pods, , ran pod set up Podfile.lock
4. Metro cache reset: npx react-native begin --reset-cache
5. Simulator reset: Erased all content material and settings

Questions

1. Why does the React Bridge get invalidated instantly on iOS however work fantastic on Android?
2. Is the dSYM warning associated to the clean display subject?
3. May there be a problem with the improve from RN 0.69.3 to 0.74.5 affecting iOS particularly?
4. Are there any iOS-specific configuration points within the present setup?

Any insights on debugging this iOS-specific subject could be enormously appreciated! Thanks upfront.