Black Screen on RN 0.71.6

[richardReitz]

Bug summary

Hey guys,

I did a zero install and am facing a black screen. I put logs on the home screen (App.tsx) and they come out normally, but the App remains on a black screen.

The home screen is simple:

import React from "react";
import { Text, View } from "react-native";
import RNBootSplash from "react-native-bootsplash";

console.log("Call App TSX");

function App(): JSX.Element {
  React.useEffect(() => {
    const init = async () => {
      // …do multiple sync or async tasks
      console.log("init");
    };

    init().finally(async () => {
      await RNBootSplash.hide({ fade: true, duration: 500 });
      console.log("Bootsplash has been hidden successfully");
    });
  }, []);

  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
}

export default App;

The AppDelegate.m

#import "AppDelegate.h"
#import "RNBootSplash.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"MyApp";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  [super application:application didFinishLaunchingWithOptions:launchOptions];

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:self.window.rootViewController.view];

  return YES;
}

I believe the problem is in the AppDelegate, but I've tried everything and it didn't work.

I also tried adding the following snippet and it didn't work either:

  bool didFinish=[super application:application didFinishLaunchingWithOptions:launchOptions];

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:self.window.rootViewController.view];

  return didFinish;

Any suggestion?

Library version

4.6.0

Environment info

System:
    OS: macOS 12.6.4
    CPU: (4) x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
    Memory: 29.32 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
    Watchman: 2023.04.03.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.12.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.9862592
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.18 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Open XCode and Build or run npx react-native run-ios
2. Wait for build and launch
3. See the black screen

Reproducible sample code

See the bug description for code snippets.

[zoontek]

@richardReitz In the README:

ℹ️ For react-native < 0.71 setup, follow the v4.4.0 README.md.

Which means:

#import "AppDelegate.h"
#import "RNBootSplash.h" // <- add the header import

// …

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // …

  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // <- initialization using the storyboard file name

  return YES;
}

EDIT: I updated the README to make this easier to get.

[richardReitz]

Hello @zoontek

But as I mentioned, I'm using React Native version 0.71.6.

There is " < 0.71", shouldn't it be ">=" then?

Anyway, I followed the requested steps, and I get this error:

[zoontek]

Could you please publish your complete AppDelegate.mm?

[richardReitz]

Of course!

#import "AppDelegate.h"
#import "RNBootSplash.h"
#import <Firebase.h>
#import <CodePush/CodePush.h>
#import <React/RCTBundleURLProvider.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"MyApp";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  [FIRApp configure];

  [super application:application didFinishLaunchingWithOptions:launchOptions];

  UIView *rootView = self.window.rootViewController.view; // ⬅️ ❗️ only required for react-native >= 0.71
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen

  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [CodePush bundleURL];
#endif
}

/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
///
/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
- (BOOL)concurrentRootEnabled
{
  return true;
}

@end

EDIT My App.tsx:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from "react";
import { Text, View } from "react-native";
import RNBootSplash from "react-native-bootsplash";

console.log("chamou o App TSX");

function App(): JSX.Element {
  React.useEffect(() => {
    const init = async () => {
      // …do multiple sync or async tasks
      console.log("init");
    };

    init().finally(async () => {
      await RNBootSplash.hide({ fade: true, duration: 500 });
      console.log("Bootsplash has been hidden successfully");
    });
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Text>Olá Mundo, sai tela preta</Text>
    </View>
  );
}

export default App;

[zoontek]

Nothing wrong here. Check that you didn't missed this step of the README:

Then clean your cache (https://github.com/pmadruga/react-native-clean-project), rebuild.

[richardReitz]

Yes,

See the print of XCode:

I just did all the cleanups and experienced the same issue.

Watch the video I recorded:

https://user-images.githubusercontent.com/93951962/233870903-42a58e5c-8d39-4b7f-97fa-741e80e4b745.mov

The most interesting thing is that I decided to remove Splash from the AppDelegate and leave only the basic React Native code and I got the same result: black screen (empty screen).

It looks like React Native (or Splash) wasn't going to put it in the right place inside Native.

[zoontek]

@richardReitz Try to clone this project and run the example project. If you're able to run it correctly, the issue is somewhere in your project . If you cannot, the issue is on you computer (which I doubt)

[richardReitz]

Reading other comments with the same problem, it seems something that was related to this code snippet in Info.plist.

<key>UIApplicationSceneManifest</key>
    <dict>
        <key>UIApplicationSupportsMultipleScenes</key>
        <true/>
    </dict>

Removing this brought the application's home screen back to display.

[trangthuanbinh3696]

I'm able to fix this error by comment "return YES" in didFinishLaunchingWithOptions and replace it with default code, don't know why but hope it will help someone.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"Teamscare";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  UIView *rootView = self.window.rootViewController.view; // ⬅️ ❗️ only required for react-native >= 0.71
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen

  // return YES;
  return [super application:application didFinishLaunchingWithOptions:launchOptions]; // add this line
}

[zoontek]

@trangthuanbinh3696 It makes no sense since the builtin didFinishLaunchingWithOptions returns YES

[trangthuanbinh3696]

[super application:application didFinishLaunchingWithOptions:launchOptions]

Yes @zoontek, actually I found that the reason for me having this bug is because I do not call [super application:application didFinishLaunchingWithOptions:launchOptions] after replaced it with "return YES".

[zoontek]

@trangthuanbinh3696 Ah yes, that's something else 😄

[anatooly]

react-native-bootsplash not work on last "react-native": "0.71.7" & last iOS version.

RNBootSplash.hide() — don't work & nothing hidden, Splash screen autohidden

Black screen if UIApplicationSupportsMultipleScenes => true

[andreialecu]

Indeed I also just updated and I notice that the splash screen auto hides, on iOS with 0.71.7.

Removed every RNBootSplash.hide(); from the app and it still hides.

[anatooly]

Indeed I also just updated and I notice that the splash screen auto hides, on iOS with 0.71.7.

Removed every RNBootSplash.hide(); from the app and it still hides.

Yeap it work, removed or not RNBootSplash.hide(); but if you splashscreen for example background color: 'red' and react-native application backgroundColor: 'red' we see white blink effect for 0.5-1 sec., when spashscreen hide/fade and rn initialize.

[altmshfkgudtjr]

If you are using RNN together, does the issue occur?

I was able to resolve it by checking the following issue #7676. don't know why but hope it will help someone.

[AdarshJais]

@zoontek Any Update here, I am facing the issue being discussed over here ( react-native: 0.72.3 , platform: iOS)

• Black Screen When App Start
• .hide() has no effect, use it or not the splash do hide automatically