DEV Community

Željko Šević
Željko Šević

Posted on • Originally published at sevic.dev on

Splash screen with React Native

A splash screen is the first thing user sees after opening the app, and it usually shows an app logo with optional animations. This post covers setup for Android devices. iOS setup will be covered additionally.

Prerequisites

  • installed Android studio

  • bootstrapped app

  • react-native-splash-screen package installed

npx react-native init SplashScreenApp
cd SplashScreenApp
npm i react-native-splash-screen
Enter fullscreen mode Exit fullscreen mode

JavaScript setup

Hide the splash screen when the app is ready

// App.js
// ...
useEffect(() => SplashScreen.hide(), []);
// ...
Enter fullscreen mode Exit fullscreen mode

Native setup

Extending MainActivity class with onCreate method

file: android/app/src/main/java/com/splashscreenapp/MainActivity.java

import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;
// ...
@Override
protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this, R.style.SplashTheme, true);
  super.onCreate(savedInstanceState);
}
// ...
Enter fullscreen mode Exit fullscreen mode

Adding splash screen activity with the theme into the Android manifest

file: android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.splashscreenapp">

  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme">
    <activity
      android:name=".SplashActivity"
      android:theme="@style/SplashTheme"
      android:label="@string/app_name"
      android:exported="true">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
      android:windowSoftInputMode="adjustResize"
      android:exported="true"/>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  </application>
</manifest>
Enter fullscreen mode Exit fullscreen mode

Implementing SplashActivity class

file: android/app/src/main/java/com/splashscreenapp/SplashActivity.java

package com.splashscreenapp;

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);
    finish();
  }
}
Enter fullscreen mode Exit fullscreen mode

Themes setup

file: android/app/src/main/res/values/styles.xml

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:statusBarColor">@color/theme_bg</item>
    <item name="android:windowBackground">@drawable/background_splash</item>
  </style>
  <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:background">@drawable/background_splash</item>
    <item name="android:windowDisablePreview">true</item>
    <item name="colorPrimaryDark">@color/theme_bg</item>
  </style>
</resources>
Enter fullscreen mode Exit fullscreen mode

Colors setup

file: android/app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="theme_bg">#2F3C7E</color>
</resources>
Enter fullscreen mode Exit fullscreen mode

Adding config for background splash drawable

file: android/app/src/main/res/drawable/background_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
  <item android:drawable="@color/theme_bg"/>
  <item
    android:width="300dp"
    android:height="300dp"
    android:drawable="@mipmap/splash_icon"
    android:gravity="center" />
</layer-list>
Enter fullscreen mode Exit fullscreen mode

Adding layout

file: android/app/src/main/res/layout/launch_screen.xml

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

Images for splash screen

App Icon Generator can be used for generating the images. Open the Image Sets tab, choose 4X design base size, insert an image and generate corresponding images for the splash screen.

Store the downloaded images in mipmap (android/app/src/main/res/mipmap-*hdpi/splash_icon.png) folders.

Demo

The demo with the mentioned examples is available here.

Top comments (0)