How to custom Splash Screen of React Native App (Android).

2019 July 03
—
technical
before to after

Why do I see this screen? What is it?

When you open an React Native App, you will see the white screen before you see your coded screen. Why do you see it?

To know why you see this screen, you must know how an react native app work? React Native app includes two main part: native screen and javascript code. When you start an app, the system will load the native screen and the native screen will load your javascript code. So you will see the native screen (default it is white screen) util the javascript code was loaded completely.

How to custom this screen?

To custom this screen, you need Android Studio and some knowledge about android app. You will create a new background and override the white background.

Prepare resource

We need change style of native app to see clearly. I will change background of my app to #CCC.

main

If you want to show your logo in splash screen, you have to create several logo files for different desity screens. To do this, you must have a logo file, I use android logo.

Open project in Android Studio (Open file android/build.gradle in Android Studio), create new Image Asset (click right mouse at res -> New -> Image Asset):

  • Icon Type: Launcher Icons (Legary only)
  • Name: ic_logo
  • Asset Type: Image
  • Path: select path to logo
  • Shape: None
create-logo

Override default screen

Create new file colors.xml in folder android/app/src/main/res/values (right click res/values -> New -> Values resource file).

If folder res/drawable don’t exist, create it (right click res -> New -> Android Resource Directory):

  • Directory name: drawable
  • Resource type: drawable
  • Source set: main
Create drawable folder

Create new file splash_background.xml in folder android/app/src/main/res/drawable (right click res/drawable -> New -> Drawable resource file).

Modify file styles.xml in folder android/app/src/main/res/values from to

Finally, change the screen style, you need change theme of your activity in AndroidManifest.xml in folder manifests from to

Project structure:

project-structure-android

Conclusion

There is result

project-structure-android

You can find source code of project on github