Change the Splash Screen for Android Apps built with React Native
We’ll replace the default React Native app splash screen with a custom splash screen image on Android. We’ll also use the react-native-splash-screen module to help with the configuration.
Instructor: [00:00] For Android, install React native's Splash Screen and run React native link. Open the Android folder at the root of the project in the text directory and find MainActivity.java.
[00:15] Now, import android.os.Bundle and the splash screen library that we linked from earlier. Then, we need to override onCreate and tell it to show the Splash Screen when the app start.
[00:35] Now, we need to make a layout folder if it doesn't exist. From the root of the project that's at android/app/src/main/res/layout. Inside that layout folder, make launch_screen.xml.
[00:57] Then in launch_screen.xml, we'll paste the code from the React native's Splash Screen module installation guide, which tells the app to show something called launch_screen, though we need to make a new drawable folder, and the same folder has this layout folder.
[01:14] We can specify many different sizes of launch_screen like the other size folders here, but I'll just make a single drawable/xhdpi folder for now, and Android will automatically resize the image that we put in. This may or may not be OK for the splash screen image that you choose for your app.
[01:33] In to that drawable folder, we can paste on launch_screen. The name is important however. We need to make sure to name it launch_screen.png.
[01:41] Back in the Android project, in the res/values folder, we can create a new colors.xml file if that doesn't exist. Inside of there, we'll copy the XML straight from their React native's Splash Screen module instructions, but we'll change the primary dark color to the dark blue that we've been using for our app.
[02:06] Start an app.js. Import the Splash Screen module, and we'll export a new component that just renders the base model nav by adding componentDidMount lifecycle method. In that, we'll tell the splash screen to hide.
[02:23] We're finally ready to test this out. First, uninstall the app from the emulator and rerun the app with react-native run-android. There is a new splash screen for Android.