Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Change the Splash Screen for Android Apps built with React Native

    react-nativeReact Native
    javascriptJavaScript
    androidAndroid

    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.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.