Splash Screen

It's very important to deal with the splash screen on both iOS and Android for best user experience. We need to make the transition from the splash screen to the app as seamless as possible.

This is an explanation of the most basic setup for splash screens on both Android & iOS.

iOS

If you look at AppDelegate.m, the entry-point of the native iOS app, you're going to see the following line:

rootView.backgroundColor = [UIColor blackColor]

This is going to be the background of our RN app container, which is visible while the JS bundle is being loaded.

In this scenario, the flow of the app's initialization is going to be:

1. Splash screen
2. Black screen (rootView.backgroundColor = [UIColor blackColor])
3. The Component inside <PersistGate loading={Component}> [optional, if redux-persist is used]
4. Finally, your app

What we want to do is make the transition seamless. We need to get rid of the 'black' screen the rootView has while the bundle is being loaded.

---

First, we'll create a Storyboard, which will be used as a splash screen. Follow this guide to create a Storyboard launch screen.

Then, add this inside your AppDelegate.m:

UIViewController *rootViewController = [UIViewController new];

#FROM HERE
// Init 'loadingView' view controller
UIStoryboard *loadingView = [UIStoryboard storyboardWithName:@"${STORYBOARD_NAME}" bundle:nil];
UIViewController *loadingViewController = [loadingView instantiateViewControllerWithIdentifier:@"${CONTROLLER_ID}"];
#TO HERE

loadingViewController.view.frame = self.window.bounds;

#FROM HERE
// Set loading view
rootView.loadingView = loadingViewController.view;
rootView.loadingViewFadeDuration = 0.5f;
#TO HERE

rootViewController.view = rootView;

• Replace ${STORYBOARD_NAME} with the story board name you've created
• Replace ${CONTROLLER_ID} with the Storyboard ID you've assigned

A bit of theory:

The rootView has a loadingView property, other than background. What we're doing here, is creating & assigning a new view to the loadView, which is visible while the JS bundle is being loaded.

This line is creating a view from a UIStoryboard, which we'll create next:

UIStoryboard *loadingView = [UIStoryboard storyboardWithName:@"${STORYBOARD_NAME}" bundle:nil];

This line assigns the view a controller, which we'll also create together with the Storyboard:

UIViewController *loadingViewController = [loadingView instantiateViewControllerWithIdentifier:@"${CONTROLLER_ID}"];

---

Now, your root's loadingView is the same as your Splash screen, and the transition won't be visible.

If you want to make the PersisGate to also look like the Splash Screen, then add the same image/color to the loading component, and center it to match the Launch Screen.

Android

Follow this guide, it's very straightforward. The SplashScreen will be the background of your whole Android app, and as long as the JS is not loaded, it'll stay there.

Just remember to set a background color on your root view!