Change the Splash Screen for Android

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.

Android Splashscreen

• Open android project in text editor and navigate to MainActivity.java
• Add imports
  JAVA

  import android.os.bundle
  import com.facebook.react.ReactActivity
  import org.devio.rn.splashscreen.SplashScreen

• Override onCreate method to display splashscreen
  JAVA

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);
    super.onCreate(savedInstanceState);
  }

• Create a launch_screen.xml file at android/app/src/main/res/layout - creating any directories that don't exist yet - and add the following content
  XML

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@drawable/launch_screen">
  </LinearLayout>

• Create a drawable-xhdpi folder in the same layout directory and add the launch screen image - renamed to launch_screen.png
• Create a colors.xml file if it does not exist at android/app/src/main/res/values and populate it with
  XML

  <?xml version="1.0" encoding="utf-8"?>
  <resources>
    <color name="primary_dark">#0066CC</color>
  </resources>

• Uninstall the app from the emulator, reinstall and launch.

---

🐦   Previous   💼   Next