Skip to content

Splash screen

Jump to bottom
Dmitry Usik edited this page Apr 3, 2022 · 12 revisions

🤔 Intro

In fact, a splash screen is required for each application, in the case with react-native, this is an overlay for the user while the native resources are being loaded. Basically, the most common implementation is a simple screen with the primary color of the product and the brand logo in the center.

Implementation

Actually, the base project has the implementation for the native splash screens for both platforms and it might be enough to change the colors and brand icon.

  1. Using Xcode, open BootSplash.storyboard and edit the resources;
  2. Using Android Studio, open styles.xml and edit the resources.

3rd party solutions

The chosen solution will base on the navigation which is used in the project. I wouldn't recommend using react-native-splash-screen since this library hasn't been maintained for a while, but on the other hand, this is the only possible solution in the case with react-native-navigation. You won't have any problems using react-navigation, and you'll be able to use a stable and maintained library react-native-boot-splash. Don't forget that all the complex logic might be implemented on the native side but it might require a longer timeline.

Clone this wiki locally