DEV Community

How to add a splash screen to a React Native app - The easy way

Mateo Hrastnik on January 27, 2022

A splash screen is the first screen the users see after tapping the app icon. It's typically a simple screen with your app logo in the center and g...

Read full post

Garrett M • Jun 23 '23

I am now using React Native 0.71. Most of these instructions still work great, but I am stuck at the part about editing AppDelegate.m (Under the heading “Setting a blank background on iOS” above), as that file no longer exists with RN 0.71. Instead, there is AppDelegate.mm, and there is nothing in that file that matches the instructions. I tried just adding the suggested line in the file, but it failed to compile, and I don’t know what I’m doing in that file anyway.

I was able to complete all the other steps, and it works perfectly on Android. It’s nearly there on iOS: it launches with the appropriate blank color as defined in LaunchScreen.storyboard, then it briefly flashes to white, then it goes on correctly to the code created in “The JS Part.” I would like to get rid of the flash of white, and I suspect it relates to the step about editing AppDelegate.m that I can’t figure out in this version of React Native.

Does anyone have a suggestion?

Mateo Hrastnik • Jul 27 '23

Yes, I've updated the article now.

You can use the following line to change the color of the native view and avoid the blank screen:

self.window.rootViewController.view.backgroundColor = [UIColor colorWithRed:0.98431 green:0.78824 blue:0.04314 alpha:1.00];

Garrett M • Jul 27 '23

It is so kind of you to respond. I’m afraid I still can’t figure out where to put that line, since I have no AppDelegate.m file in this project that was newly started from React Native 0.71. I have also done a search across my entire code base for self.window.rootViewController as well as rootView.backgroundColor and I got no results. I tried adding the line you suggested above to various places in AppDelegate.mm, AppDelegate.h and main.m just to see if it was as simple as that, but in each case, the app could not compile.

In the end, I am not sure that it is necessary. Following the rest of your steps (many thanks, by the way), the flash of the default color appears only to happen on dev builds of the app. On a release build, the app launches with my desired color from the beginning and moves smoothly into the splash screen as I would hope.

Mateo Hrastnik • Jul 27 '23 • Edited

Open AppDelegate.mm and change the following line:

return [super application:application didFinishLaunchingWithOptions:launchOptions];

to this:

BOOL result = [super application:application didFinishLaunchingWithOptions:launchOptions];
self.window.rootViewController.view.backgroundColor = [UIColor colorWithRed:0.87843 green:0.72549 blue:0.73333 alpha:1.00];
return result;

I've updated the article. Also there's a slight change in the LaunchScreen.storyboard file. You can change the colorSpace of your background to use device RGB (colorSpace="deviceRGB") otherwise the colors will be slightly different between the native to JS handoff.

Garrett M • Jul 27 '23

Thank you for the followup. I have now implemented this last change with success. I also thank you for updating your article so it stays relevant.

Elyse Segebart • Jun 15 '22 • Edited

I am trying to understand this part.

(LOADING_IMAGE);

When I try to use this, I get an error saying unexpected token pointing to the | in front of the first typeof. How are you able to do that?

Ben Winters • Sep 14 '22

For this I converted the constants to a TS enum:
enum SplashState { Loading, FadeIn, WaitForReady, FadeOut, Hidden, } // ... const [state, setState] = useState<SplashState>(SplashState.Loading)

Or you could use a TS union type of the string constants.

Sreekar • Nov 6 '23

Hello Everyone,
We got issues in splash screen i.e., white screen is coming after the splash screen instead of redirected to the login screen. And it took more time to load the index.js file.So, that during transition from splash screen to login screen in between white screen.
Could you please help us out as soon possible?

mdehghani65 • Sep 23 '22

I translated the splash component code as follows:

import React, { useEffect, useRef, useState } from "react";
import { Animated, StyleSheet } from "react-native";

export function WithSplashScreen(props) {
return (
<>
{props.isAppReady && props.children}

  <Splash isAppReady={props.isAppReady} />
</>

);
}

const LOADING_IMAGE = "Loading image";
const FADE_IN_IMAGE = "Fade in image";
const WAIT_FOR_APP_TO_BE_READY = "Wait for app to be ready";
const FADE_OUT = "Fade out";
const HIDDEN = "Hidden";

export const Splash = (isAppReady = props.isAppReady) => {
const containerOpacity = useRef(new Animated.Value(1)).current;
const imageOpacity = useRef(new Animated.Value(0)).current;

const [state, setState] = useState(LOADING_IMAGE);

useEffect(() => {
if (state === FADE_IN_IMAGE) {
Animated.timing(imageOpacity, {
toValue: 1,
duration: 1000, // Fade in duration
useNativeDriver: true,
}).start(() => {
setState(WAIT_FOR_APP_TO_BE_READY);
});
}
}, [imageOpacity, state]);

useEffect(() => {
if (state === WAIT_FOR_APP_TO_BE_READY) {
if (isAppReady) {
setState(FADE_OUT);
}
}
}, [isAppReady, state]);

useEffect(() => {
if (state === FADE_OUT) {
Animated.timing(containerOpacity, {
toValue: 0,
duration: 1000, // Fade out duration
delay: 1000, // Minimum time the logo will stay visible
useNativeDriver: true,
}).start(() => {
setState(HIDDEN);
});
}
}, [containerOpacity, state]);

if (state === HIDDEN) return null;

return (
collapsable={false}
style={[style.container, { opacity: containerOpacity }]}
>
source={require('../images/bluecircle.png')}
fadeDuration={0}
onLoad={() => {
setState(FADE_IN_IMAGE);
}}
style={[style.image, { opacity: imageOpacity }]}
resizeMode="contain"
/>

);
};

const style = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
backgroundColor: '#E0B9BB',
alignItems: "center",
justifyContent: "center",
},
image: {
width: 250,
height: 250,
},
});

Golden Retriever • Feb 8 '22

Hey. What's this function you're using initialize()?

Mateo Hrastnik • Feb 11 '22

I use it to initialize the app and run stuff I need to do on app start.

For example it could look something like this:

async function initialize() {
  await loadFonts()
  const store = createReduxStore();
  await initializePushNotifications()
  ...
}

avidlearner • Jan 27

Hi! I wanted to attach video to the splash screen background I am from JS world so have little to no knowledge of objective c and all that.

Tara Nakajima • Sep 23 '22

This works pretty great but does anyone else have an issue with the splash screen being a bit blurry on Android?

Mateo Hrastnik • Oct 19 '22

Just make sure the image you use has a big enough resolution

Matti_64 • Oct 21 '22

Thanks it works great on iOS but on android the background color is popping up during navigation (probably due to android:windowBackground set to AppTheme in styles.xml)

Matti_64 • Oct 21 '22 • Edited

Ok the issue is linked to Stack.Navigator V6..
to fix it, i've added a screenOptions param to Stack.Navigator
<Stack.Navigator screenOptions={{ presentation: 'transparentModal', contentStyle: { backgroundColor: 'white' } }}>