How to Display a Splash Screen in React Native?

A splash screen is the first screen when you open the React Native app. It usually shows the brand logo until the app is ready to launch. Displaying the brand name and logo in a splash screen helps boost user experience and make your brand memorable to users.

Let’s find out How to Display a Splash Screen in React Native App.

Steps to Display a Splash in React Native App

Install the package using npm or yarn:

Using npm:

npm i react-native-splash-screen --save

Using yarn:

yarn add react-native-splash-screen

Android Setup

Step 1: In your android/settings.gradle file, make the following additions:

include ':react-native-splash-screen'   

project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

Step 2: In your android/app/build.gradle file, add the :react-native-splash-screen project as a compile-time dependency:

dependencies {

    ...

    implementation project(':react-native-splash-screen')

}

Step 3: Open up android/app/src/main/java/[…]/MainApplication.java

// react-native-splash-screen >= 0.3.1

import org.devio.rn.splashscreen.SplashScreenReactPackage;

// react-native-splash-screen < 0.3.1

import com.cboy.rn.splashscreen.SplashScreenReactPackage;

......

@Override

protected List<ReactPackage> getPackages() {

   ......

   new SplashScreenReactPackage()           // <------ HERE

   ......

}

iOS Setup

Step 1: Reinstall pod with cd ios && pod install && cd ..

Step 2: Changes to the Info.plist file:

<key>UILaunchStoryboardName</key>
<string>BlankLaunchScreen</string>

Example:

Create a folder named components and a file named LocalSplashScreen.tsx inside it.

import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { responsiveFontSize, responsiveHeight } from 'react-native-responsive-dimensions'
import { useSelector } from 'react-redux'

const LocalSplashScreen = () => {

    return (

        <View style={styles.main}>

        <Image source={require('../assets/logo.png')}  style={styles.image}/>

       </View>

    )

}

export default LocalSplashScreen

index.js

import React, { useEffect } from 'react';
import { Linking, Platform, Alert,Platform } from 'react-native';
import VersionCheck from 'react-native-version-check';
import LocalSplashScreen from './components/LocalSplashScreen';

const App = () => {

  const [splashScreen, setSplashScreen] = useState(true)

  useEffect(() => {

    setTimeout(() => {

      setSplashScreen(false)

    }, 3000);

   }, [])

 if (first) {

    return <LocalSplashScreen />

  }

 return (

    <View>

 <Text>React Native </Text>

  </View>

  );

export default App;

Output:

Conclusion:

Follow the above steps to add a splash screen in your React Native app and leave a lasting impression on your users. If you face any challenges, let me know through the comment section. Share the tutorial with your friends and stay with us for more such solutions.

Want a featureful Android or iOS Mobile App? Click Here!

Also check – How to Add an App Force Update Popup in React Native?

Happy Coding!