React Native Initial Loading View

Or How to Avoid the White Screen Flash

One of my main goal whenever I use React Native is to have an app that feels the same way as a native app. I want people to use the app and think it's been made completely natively. I want everything to feel just as if it was made in pure Swift/Java.

Whenever you launch a React Native app, not only does it have to load the native runtime, but it also has to load a JavaScript Context and do the initial rendering. That time used to render the initial RootView sometimes results in a white screen flash:

Now everybody knows my app is not purely native!

This is particularly visible in iMessage apps where the splash screen is not always shown.

Fortunately, there is a property that can be used on the RootView to display something else during the load time. That property is not really documented, but has been around for a while now. It's called loadingView and is present on the RCTRootView class.

Usage

It's really simple to use, but requires a bit of knowledge of how to do views in Objective-C.

So in your AppDelegate.m (or anywhere you render a RCTRootView yourself), you do the following:

// Root view instantiation.

RCTRootView *rootView = [

[RCTRootView alloc] initWithBridge:[self getBridge]

moduleName: moduleName

initialProperties:rootProps

]; // Set up a loading view. Here are three ways to do it

// 1. Set up a plain background color

UIView* loadingView = [UIView new];

loadingView.backgroundColor = [UIColor colorWithRed:0x66 green:0x33 blue:0x99 alpha:1]; // 2. Use a full screen image

UIImageView* loadingView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"EduardKhilDancing"]];

// 3. Use a nib file. For that create a View element in a xib.

// The name of the nib is the name of the file without the extension.

UIView* loadingView = [[[NSBundle mainBundle] loadNibNamed:@"PFUDOR" owner:self options:nil] firstObject]; // Final step! Assign the view on the RCTRootView object.

rootView.loadingView = loadingView;

So that's it! You now have an awesome pre-loading view that will keep the attention of your users instead of them seeing a pure white screen. For example you could render a screen with an empty nav bar and a loading indicator.

Note that this loading view has some configuration you can add. Here are the default values for it:

// How long do we wait before showing that loading view

rootView.loadingViewFadeDelay = 0.25; // How long should the fade animation for the view last

rootView.loadingViewFadeDuration = 0.25;

The loadingView property is what we are using in the next version of our iMessage app to improve loading perception.

To lean more about how to create an iMessage app with React Native, here is a tutorial!