React-Native/XCode 12.4/iOS Simulator - Black Screen on App Start-Up

Question

Problem:

After successfully building with no errors logged, the app opens to the standard LaunchScreen.storyboard but right after comes a black screen. The Metro Bundler still loads and the app's code goes through to the login screen but the black screen persists and the app is irresponsive to input.

What I Use:

• Hardware: iMac (Retina 5K, 27-inch, Late 2015)
• OS: macOS BigSur 11.2.3
• Simulator: iOS Simulator iPhone 12 (14.4)
• Test Phone: iPhone 7 (14.4)
• XCode Version 12.4 (12D4e)

Relevant Packages:

"react": "17.0.1",
"react-native": "0.64.0",
"@react-navigation/bottom-tabs": "^5.11.8",
"@react-navigation/drawer": "^5.12.4",
"@react-navigation/material-bottom-tabs": "^5.3.14",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-screens": "^2.18.1",
"react-native-safe-area-context": "^3.2.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-appearance": "^0.3.4",

AppleDelegate.m

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h>

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif



@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  if ([FIRApp defaultApp] == nil) {
     [FIRApp configure];
   }
  
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"MyProject"
                                            initialProperties:nil];

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor blackColor];
  } 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" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

Index.js

import App from './App';
import { name as appName } from './app.json';
import AsyncStorage from '@react-native-community/async-storage';

import { AppRegistry, Platform } from 'react-native';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

App.js

import React, { useState, useEffect } from 'react';
import { Root } from 'native-base';
import { AppearanceProvider } from 'react-native-appearance';

import AppContainer from './AppContainer.js'

export default App = () => {
return(
    <Root> 
      <AppearanceProvider>
        <AppContainer />
      </AppearanceProvider>
    </Root>
  )
}

AppContainer.js

import { NavigationContainer, useNavigation } from "@react-navigation/native";

const AppContainer = () => {

    const { store, actions } = useContext(Context)


    const routeNameRef = useRef();
    const navigationRef = useRef();
    
    return(
        <NavigationContainer
            ref={navigationRef}
            onReady={() => routeNameRef.current = navigationRef.current.getCurrentRoute().name}
            onStateChange={() => {
                const previousRouteName = routeNameRef.current;
                const currentRouteName = navigationRef.current.getCurrentRoute().name
                actions.navigate.currentPage(currentRouteName)
                // Save the current route name for later comparision
                routeNameRef.current = currentRouteName;
        }}>
        <NavContainer />  // ALL PAGES HERE, STARTS WITH SPALH PAGE
        </NavigationContainer>
    )
}

export default Store(AppContainer);

What I've Tried:

1. Programatic Navigation Functioning in Background => Still Black and Irresponsive

Even though I only see the black screen, my console log shows that react-navigation is functioning. First, the SPALSH page opens and then goes to the LOGIN page as seen below.

Terminal Console Log:

 WARN  AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
 LOG  Running "MyProject" with {"rootTag":11,"initialProps":{}}
 LOG  You are now in the SPLASH PAGE
 LOG  Null User Token
 LOG  You are now in the LOGIN PAGE
 LOG  You are now in the LOGIN PAGE

XCode Debug Log:

The default Firebase app has not yet been configured. Add `[FIRApp configure];` (`FirebaseApp.configure()` in Swift) to your application initialization. 
 7.9.0 - [Firebase/Core][I-COR000008] The project's Bundle ID is inconsistent with either the Bundle ID in 'GoogleService-Info.plist', or the Bundle ID in the options if you are using a customized options. To ensure that everything can be configured correctly, you may need to make the Bundle IDs consistent. To continue with this plist file, you may change your app's bundle identifier to 'MyProject'. Or you can download a new configuration file that matches your bundle identifier from https://console.firebase.google.com/ and replace the current one.
[Firebase/Analytics][I-ACS023007] Analytics v.7.9.0 started
[Firebase/Analytics][I-ACS023008] To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled
Firebase/Messaging][I-FCM001000] FIRMessaging Remote Notifications proxy enabled, will swizzle remote notification receiver handlers. If you'd prefer to manually integrate Firebase Messaging, add "FirebaseAppDelegateProxyEnabled" to your Info.plist, and set it to NO. Follow the instructions at:
https://firebase.google.com/docs/cloud-messaging/ios/client#method_swizzling_in_firebase_messaging
to ensure proper integration.
flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Network
  nw_protocol_get_quic_image_block_invoke dlopen libquic failed
 [native] Running application MyProject ({
    initialProps =     {
    };
    rootTag = 1;
})
 [native] RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks
  [Firebase/Analytics][I-ACS800023] No pending snapshot to activate. SDK name: app_measurement
  [Firebase/Analytics][I-ACS023012] Analytics collection enabled
 [Firebase/Analytics][I-ACS023220] Analytics screen reporting is enabled. Call +[FIRAnalytics logEventWithName:FIREventScreenView parameters:] to log a screen view event. To disable automatic screen reporting, set the flag FirebaseAutomaticScreenReportingEnabled to NO (boolean) in the Info.plist
 [javascript] AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
 [plugin] AddInstanceForFactory: No factory registered for id <CFUUID 0x600002826e60> F8BB1C28-BAE8-11D6-9C31-00039315CD46
 [connection] nw_socket_handle_socket_event [C5.1:1] Socket SO_ERROR [61: Connection refused]
 [connection] nw_socket_handle_socket_event [C5.2:1] Socket SO_ERROR [61: Connection refused]
 [connection] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
 TCP Conn 0x60000183cb00 Failed : error 0:61 [61]
 [javascript] Running "MyProject" with {"rootTag":1,"initialProps":{}}
 [javascript] RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks
 [native] [GESTURE HANDLER] Initialize gesture handler for root view <RCTRootContentView: 0x7fb622c0f680; reactTag: 1; frame = (0 0; 0 0); gestureRecognizers = <NSArray: 0x60000214e3a0>; layer = <CALayer: 0x600002f8aca0>>
[native] Manifest does not exist - creating a new one.

(null)
 [javascript] You are now in the SPLASH PAGE
 [javascript] You are now in the LOGIN PAGE
 [javascript] You are now in the LOGIN PAGE

2. Start From New Project => White Screen and Errors

I have attempted to solve this issue by creating a new react-native project from the react-native website... only now, I get a white screen and some errors. (seen below)

Metro Console:

Invariant Violation: Native module cannot be null.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

XCode Console:

flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Network
nw_protocol_get_quic_image_block_invoke dlopen libquic failed
 [native] Running application MyTestApp ({
    initialProps =     {
    };
    rootTag = 1;
})
[javascript] Invariant Violation: Native module cannot be null.
 [connection]  Socket SO_ERROR [61: Connection refused]
[javascript] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
[connection] nw_socket_handle_socket_event [C5.2:1] Socket SO_ERROR [61: Connection refused]
[connection] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
TCP Conn 0x6000005c4160 Failed : error 0:61 [61]
[native] Running surface LogBox ({
    initialProps =     {
    };
    rootTag = 11;
})
[javascript] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
[native] Failed to mount LogBox within 1s

I am at a loss of how to move forward on this issue.

Answer 1

In the end, I had to download a previous version of the project from the GitHub repository. Everything worked as per usual.

If I were to duplicate a project with updated npm packages, I would need to build off the most recent vanilla build on the React-Native site. (Instead of just copy and pasting files,

My personal lesson here is to not to be stubborn that I can solve problem to the point a week goes by. Keep an introspective view and fall back on what I know works.