DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for React Native β€” Fix Blank Flash After Splash Screen
Aryan Mittal
Aryan Mittal

Posted on

React Native β€” Fix Blank Flash After Splash Screen

The splash screen is the first view of your React Native app that a potential user sees. Whether they just downloaded the app or are opening it the thousandth time, users are immediately greeted with your splash screen. Therefore, it is of the utmost importance to promote a great user experience around the splash screen.

The concept of the splash screen was created as a placeholder to display while the app is loading. This makes phones feel responsive and creates the illusion that the app loads instantly. While this usually works out of the box for native iOS and Android applications, apps using React Native require additional steps during the loading process. This means loading your JavaScript bundle, initializing the JS-Native bridge and loading React.

"As your App Bundle grows in size, you may start to see a blank screen flash between your splash screen and the display of your root application view."
β€” React Native documentation

Users’ phones aren’t aware of the additional loading time, so the splash screen disappears before React and the JavaScript bundle are loaded, and a blank flash occurs. Although the flash is brief, it’s a terrible user experience and it can feel disorienting.

Thankfully, there’s an easy fix! You can add the following code to AppDelegate.m in order to keep your splash screen displayed during the transition:

// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"<br>
  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];<br>
  UIViewController *vc = [sb instantiateInitialViewController];<br>
  rootView.loadingView = vc.view;

Now rebuild your app and enjoy the seamless splash screen!

Top comments (1)

Collapse
 
nyi_lwin_d3d361034e32072f profile image
Nyi Lwin

Thank you for your post. How do I fix in android?

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.