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 i…


This content originally appeared on DEV Community and was authored by Aryan Mittal

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!


This content originally appeared on DEV Community and was authored by Aryan Mittal


Print Share Comment Cite Upload Translate Updates
APA

Aryan Mittal | Sciencx (2021-06-30T00:00:31+00:00) React Native — Fix Blank Flash After Splash Screen. Retrieved from https://www.scien.cx/2021/06/30/react-native-fix-blank-flash-after-splash-screen/

MLA
" » React Native — Fix Blank Flash After Splash Screen." Aryan Mittal | Sciencx - Wednesday June 30, 2021, https://www.scien.cx/2021/06/30/react-native-fix-blank-flash-after-splash-screen/
HARVARD
Aryan Mittal | Sciencx Wednesday June 30, 2021 » React Native — Fix Blank Flash After Splash Screen., viewed ,<https://www.scien.cx/2021/06/30/react-native-fix-blank-flash-after-splash-screen/>
VANCOUVER
Aryan Mittal | Sciencx - » React Native — Fix Blank Flash After Splash Screen. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/30/react-native-fix-blank-flash-after-splash-screen/
CHICAGO
" » React Native — Fix Blank Flash After Splash Screen." Aryan Mittal | Sciencx - Accessed . https://www.scien.cx/2021/06/30/react-native-fix-blank-flash-after-splash-screen/
IEEE
" » React Native — Fix Blank Flash After Splash Screen." Aryan Mittal | Sciencx [Online]. Available: https://www.scien.cx/2021/06/30/react-native-fix-blank-flash-after-splash-screen/. [Accessed: ]
rf:citation
» React Native — Fix Blank Flash After Splash Screen | Aryan Mittal | Sciencx | https://www.scien.cx/2021/06/30/react-native-fix-blank-flash-after-splash-screen/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.