Editor’s note: This splash screen React Native tutorial was last updated on 9 November 2022 to include information such as how to change the splash screen background color in iOS and Android apps.
In this tutorial, we’ll demonstrate how to build and display a splash screen in React Native. We’ll walk you through how to build stunning welcome displays for both iOS and Android apps using react-native-splash-screen
.
Here’s what we’ll cover:
- What is a splash screen?
- React Native splash screen example
- Why image size matters for splash screens
- Building a React Native splash screen
- Hiding the splash screen after the app loads
What is a splash screen?
The splash screen is the first screen that appears before the user accesses the rest of your app’s functionalities. A splash screen is arguably the best way to make your mobile application’s brand name and icon stick in the user’s subconscious.
In web applications, we use preloaders to inform animations to keep users entertained while server operations are being processed. As straightforward as this sounds, it’s a critical tool to build and retain your user base.
There are many benefits to creating a splash screen in React Native. Imagine, for example, that you’re preloading data from an API. You’ll want to show a loader while the user is waiting; showing a loader as soon as the app starts helps you present an organized, well-designed display to your user while they wait for the app to initialize.
React Native splash screen example
For this react-native-splash-screen
demo, we’ll build a splash screen for both Android and iOS. The tutorial will walk you through how to prepare the right image sizes, update the necessary files, and hide the splash screen on the app load. The finished app will look like the screenshot below:
To follow along with this React Native splash screen tutorial, you should have:
- Familiarity with CSS, HTML, JavaScript (ES6)
- Node.js and Watchman installed on your development machine
- iOS Simulator or Android Emulator for testing
- A code editor installed in your development machine (e.g., VS Code)
- A basic understanding of React/React Native
Let’s get started!
Why image size matters for splash screens
Creating a splash screen for a mobile application is a bit tricky and you don’t want to risk having display issues on some devices due to inconsistencies in your splash screen resolutions. For instance, the Android device’s requirements are totally different from that of iOS. Most experienced designers can create the required splash screen resolutions for both devices from scratch.
However, there are lots of available third-party tools that can help you create a splash screen for both Android and iOS. In this tutorial, we will be using the App Icon Generator, an online platform for creating icons and images for Android and iOS apps.
Before you proceed, make sure you have a high-definition, 2,000-by-2,000px (72 PPI) image ready. You can clone the complete source code for these tutorials on GitHub.
Building a React Native splash screen
First, head over to Appicon. Drag your image on the box provided, select 4x as your base size, select iOS, and Android, and click generate. This process should take approximately two minutes to complete, depending on your internet speed:
Next, extract the downloaded file and copy the iOS and Android folder to the assets folder located in the assets directory of the starter project you cloned:
Building a splash screen in React Native requires some fine-tuning. To begin, follow the steps below.
Run each command in your terminal
(on mac) or command prompt
(on Windows):
npm i
to install all the dependencies that are included in the starter file.npm i
react-native-splash-screen --save
to install theRNSplashscreen
packagecd
into the iOS directory and runpod install
to link all dependencies.
Navigate back to the root directory of the project.
Build a splash screen for iOS in React Native
Navigate to iOS
> SplashScreen
, open AppDelegate.m
and add the code #import "RNSplashScreen"
(on line 6) and set the splash screen to show by default RNSplashScreen show
(line 41) see the comments in the code below for reference:
#import "AppDelegate.h" #import <React/RCTBridge.h> #import <React/RCTBundleURLProvider.h> #import <React/RCTRootView.h> // Import RNSplashScreen #import "RNSplashScreen.h" #ifdef FB_SONARKIT_ENABLED #import <FlipperKit/FlipperClient.h> #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h> #import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h> #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h> #import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h> #import <FlipperKitReactPlugin/FlipperKitReactPlugin.h> static void InitializeFlipper(UIApplication *application) { FlipperClient *client = [FlipperClient sharedClient]; SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; [client addPlugin:[FlipperKitReactPlugin new]]; [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; [client start]; } #endif @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { #ifdef FB_SONARKIT_ENABLED InitializeFlipper(application); #endif RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"MySplashScreen" initialProperties:nil]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; // Set the splash screen to show by default. [RNSplashScreen show]; return YES; } - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { #if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; #else return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; #endif } @end
Here, we made two significant changes to the AppDeligate
file. First, we imported the RNSplashScreen
we installed earlier into the AppDeligate.m
. Next, we set the RNSplashScreen
to show by default with the code [RNSplashScreen show]
.
Next, open up the project workspace in Xcode
, click images
, right-click anywhere below Appicon
, and select New Image Set
. Set the image name to splash
, open the assets folder, and navigate to the iOS
folder. Drag the three images in the iOS
over the three boxes on Xcode
named 1x
, 2x
, and 3x
:
Next, select LaunchScreen.storyboard
. Select View Controller Scene > View Controller > View, select the SplashScreen
and Powered by React Native
labels, and press DELETE on your keyboard.
Next, select View and click the ruler icon at the top right section of your Xcode
. Uncheck the Safe Area Layout Guide option, click on the plus icon +, type image view in the objects search input field, and then drag the image view to the View canvas:
Now that we have our image view set up, click the image property icon and change the image to splash. Set the content mod to aspect fit, as shown below:
Changing splash screen background color for iOS
The next question you might ask is “How do I change the splash screen background color in React Native?” To enforce a consistent background for the splash screen in iOS, scroll down to where you have the background and select Custom from the dropdown. In the popup, select the desired color for the splash screen. In this example, we selected white:
To confirm your application can run successfully, run a build from Xcode
. You should see something like this:
Building a splash screen for Android
Now let’s demonstrate how to build a splash screen for Android in React Native.
Navigate to Android > App > src > Main Folder and open up MainActivity.java
. Update MainActivity.java
to use react-native-splash-screen
with the code below:
package com.mysplashscreen; import android.os.Bundle; // here import com.facebook.react.ReactActivity; import org.devio.rn.splashscreen.SplashScreen; // here public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. This is used to schedule * rendering of the component. */ @Override protected String getMainComponentName() { return "MySplashScreen"; } @Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); // here super.onCreate(savedInstanceState); } }
Next, create a file called launch_screen.xml
in app/src/main/res/layout
(create the layout
folder if it doesn’t exist). Then, add the code below to the launch_screen.xml
:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" /> </RelativeLayout>
Note: The android:src="@drawable/launch_screen"
is equivalent to <img src="your_image" />
in HTML so be sure to replace the launch_screen
with the actual name of the image you generated from Appicon
.
Changing splash screen background color for Android
Like for iOS apps, you also need to know how to change the splash screen background color for Android apps.
First, copy all the assets for Android
into the res
folder. Then, create colors.xml
in the values folder and add a color called primary_dark
in app/src/main/res/values/colors.xml
:
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="primary_dark">#000000</color> </resources>
Open the Android
folder in Android Studio
, open AVD
, and run your application as shown below. If everything is set up correctly, you should see a result similar to the following screenshot:
Hiding the splash screen after the app loads
To hide the splash screen on app load, you’ll need to do two things:
- Import the
react-native-splash-screen
package into the root component (App.js
) of your React Native app - Use
useEffect()
to hide the splash screen with the code below: -
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, { useEffect } from 'react'; //import useEffect(); import { View } from 'react-native'; import { Login } from './screens'; import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; import SplashScreen from "react-native-splash-screen"; //import SplashScreen const App = () => { const theme = { ...DefaultTheme, colors: { ...DefaultTheme.colors, border: "transparent", } } useEffect(() => { SplashScreen.hide(); //hides the splash screen on app load. }, []); return ( <NavigationContainer theme={theme}> <View style={{ flex: 1 }}> <Login /> </View> </NavigationContainer> ); }; export default App;
As noted above, I’m using @react-navigation/native
to navigate from one screen to the other. For example, after login, you may wish to display the dashboard or home screen. @react-navigation/native
is one of React Native’s core packages for navigation. For a deeper dive, check out our comprehensive guide to using React Navigation.
After the app loads, the application will display the login
page which is the index screen. See the screenshot below for reference:
Conclusion
Virtually any mobile application needs a splash screen. Knowing how to build a splash screen for cross-platform apps is a foundational skill that can help you take a step forward in your mobile development career.
LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Logrocket articles are usually so good but I feel this one is not up to the usual quality – in that it is not simple to follow along. Small example is your final code in App.js uses react-navigation but there has been no instruction to import this or learn how to use it first. The other thing is simply replacing the standard AppManifest with your copied code is not great form an instructional point of view – What did all the other default code do that we have now deleted? There are many small things like this that just make it a bit harder that the usual tutorials. Don’t want to knock what is otherwise a very useful tutorial but I think a review and minor edit would be helpful
Thanks for the tutorial, small remark though. Inside launch_screen.xml it should be
android:src=”@drawable/splashscreen”
instead of
android:src=”@drawable/launch_screen”
isn’t it depend on name of your image? as recommended the name should be similar to your splash screen image name
app keeps crashing
Such a great and awesome post I must say that.
I don’t understand if you mean to copy the ENTIRE android and iOS folders into assets or just an empty Android and iOS folder? That seems weird to copy the entire thing in there.
Someone else posted this exact tutorial and I found out on GitHub that RNSplashScreen show has a bug and didn’t ever and will never work. Were you able to actually get it to work?
I can’t update my MainActivity.java for which the code showed here. React Native updated and it has more codes on this file, and if i update as showing here, it crashes.
is there a way to edit the status bar style to the light content instead of the dark one here for iOS?
Execution failed for task ‘:app:processDebugResources’.
xxxx\android\app\src\main\res\layout\launch_screen.xml:5: AAPT: error: resource drawable/splash.png (aka com.sipcall:drawable/splash.png) not found.
I thought maybe I hade to copy the splash image to the drawable folder also, I did, but it did not work.
remove ‘.png’ from ‘drawable/splash.png’
Where you called the splashscreen.xml i cant able to show the design which i added in this folder.
No need to call the xml file from our side , that file we are creating for the package only. Package will access and show it on the starting.
need to add some navigation conditions on splash screen what will i do… as i have no acess of navigation object in app.tsx
have to change the scaleType in luncher_screen.xml from centerCrop to centerInside
Hey! There’s no more such an onCreate method on MainActivity class. So, where should I add “SplashScreen.show(this);” command ?