5 Steps to use React Native splash screens: 7 tips and tricks for a seamless launch

In this post you’ll walk through what a Splash Screen is and how to build dazzling displays for both iOS and Android. If you got the chance to read our post on Animations in React Native, you’d be ready to move one step further. If you haven’t, just click here. A splash screen is the perfect place to use animations!

Wanting to take the app experience up a notch? A well-designed React Native Splash Screen is going to stick into your users’ subconscious – instilling and creating that unique user-brand bond. Here you’ll find more tips to rock UX!

Using a Splash Screen provides a consistent and visually appealing loading experience for users while the app is initializing and loading content. It lets you display a logo or other branding elements to establish the app’s identity. It can be used to present important information or a call-to-action to users while entering the app.

And last but not least, since it fills the loading process with visual aids, it makes the app seem more time-efficient!

One of the main objectives of a stunning splash screen is to ease away the wait time a user feels when loading the app or web. That’s why you need to carefully and strategically decide what tools to use and how to set them, taking into account whether you’re coding for iOS or Android.

You should always seek for a perfect display on your devices, so we are adamant in telling you to mind the requirements needed for different operating systems. You can check this post with an up-to-date demo and helpful third-party tools.

In a nutshell, a splash screen is the first screen that a user sees when launching an app. It serves as an introduction to the app and sets the tone for the users’ experience.

Step 1: Create a new React Native project

To get started, we need to create a new React Native project. If you already have the React Native CLI installed, you can run the following command to create it:

react-native init MySplashScreen

Replace “MySplashScreen” with the name of your project. This will create a new directory with the same name and generate the necessary files for a React Native app. If you need to recap on React Native, click here: React Native Configuration: everything you need to know.

Step 2: Install the react-navigation library

To create a React Native splash screen, we will use the react-navigation library. To install it, run the following command in your project’s root directory:

npm install --save react-navigation

Step 3: Create the [React Native] Splash Screen component

Next, we need to create a component for our splash screen. In your project’s root directory, create a new file called “SplashScreen.js” and add the following code:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const SplashScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to My App!</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
export default SplashScreen;

This creates a simple React Native splash screen with a centered welcome message. You can customize the design of your splash screen by modifying the styles object.

Step 4: Set up the navigation stack

Next, we need to set up the navigation stack for our app. In the root directory, create a new file called “AppNavigator.js” and add the following code:

import { createStackNavigator } from 'react-navigation';
import SplashScreen from './SplashScreen';
const AppNavigator = createStackNavigator(
  {
    Splash: { screen: SplashScreen },
  },
  {
    initialRouteName: 'Splash',
  }
);
export default AppNavigator;

This creates a stack navigator with a single screen, the splash screen. The initialRouteName property is used to specify the splash screen as that first eye-catching screen that will be displayed when the app is launched.

Step 5: Display the splash screen

Finally, we need to display the splash screen in our app. In the root directory, open the file “App.js” and add the following code:

import React from 'react';
import AppNavigator from './AppNavigator';

If you want to explore how to change background colors and how to hide it after the app is loaded, check this blog with tips for iOS and Android.

Don’t let it slip your mind, keep the logo simple and lightweight, consider using a small, optimized image file for the logo to ensure that it loads quickly. Here you’ll find different types of customization options that are available for a splash screen: 

• The background color or image of the splash screen can be changed to match the branding or design of your app. You can use the ‘style’ prop of the ‘View’ component that you render as the splash screen. Here’s an example:

import React from 'react';
import { View, Text } from 'react-native';
const SplashScreen = () => {
  return (
    <View style={{ flex: 1, backgroundColor: '#ff0000' }}>
      <Text>This is the splash screen</Text>
    </View>
  );
};
export default SplashScreen;

Note that the color used is #ff0000 which refers to red. Make pure magic and replace it with any valid color code or name to match it with the brand design! 

• The logo or other branding elements displayed on the splash screen can be modified to match the visual identity of your app. You can use the ‘Image’ component from the ‘react-native’ library. Here’s an example:

import React from 'react';
import { View, Image } from 'react-native';
const SplashScreen = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Image source={require('./logo.png')} />
    </View>
  );
};
export default SplashScreen;

In this example, the ‘Image’ component is used to render the logo image, which is stored in a file called ‘logo.png’ located in the same directory as the component. You can replace ‘./logo.png’ with the file path or URL of the image you want to use as the logo.

You can also use the ‘style’ prop of the ‘Image’ component to modify the appearance of the logo, such as its size, aspect ratio, and border radius. For example:

<Image
  source={require('./logo.png')}
  style={{ width: 200, height: 200, borderRadius: 100 }}
/>

This will render the logo with the measures shown, and will give it a circular shape. Use your own touch and adjust the values as you want to so as to achieve the desired appearance of the logo for your React Native Splash Screen.

• The font, font size, and text color of any text displayed on the splash screen can be customized to match the design of your app. You can use the style prop of the Text component. Here’s an example of how you can do this:

import React from 'react';
import { View, Text } from 'react-native';
const SplashScreen = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontFamily: 'Arial', fontSize: 32, color: '#ff0000' }}>
        This is the splash screen
      </Text>
    </View>
  );
};
export default SplashScreen;

Ta-da! Your font is ready for your React Native Splash Screen. Remember to match it with the brand design to make it eye-catching, and that will later come from the top of the user’s head, anytime and anywhere. 

• The duration of the splash screen can be modified to control how long it is displayed before the app’s main content is shown. You can use the ‘setTimeout’ function to schedule the splash screen to be hidden after a certain amount of time has passed. Here’s an example:

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
const SplashScreen = ({ navigation }) => {
  useEffect(() => {
    setTimeout(() => {
      // Navigate to the main screen after 3 seconds
      navigation.navigate('Main');
    }, 3000);
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the splash screen</Text>
    </View>
  );
};
export default SplashScreen;

In this example, the ‘useEffect’ hook is used to schedule a function to be called after 3 seconds, shown in the value of the ‘setTimeout’ function’s second argument; if you want to make it 5’’ go for ‘setTimeout(() => {…}, 5000)’. The function navigates to the main screen of the app by calling the ‘navigate’ function from the ‘navigation’ prop.

• The React Native splash screen can be configured to automatically hide after a certain amount of time, like in the example shown before. Or it can be set to remain visible until a specific event occurs, such as the app’s main content being fully loaded. You can use the ‘navigate’ function from the ‘navigation’ prop to navigate to another screen.

Here’s an example of how you can do this:

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
const SplashScreen = ({ navigation }) => {
  useEffect(() => {
    // Navigate to the main screen after the app has fully loaded
    navigation.navigate('Main');
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the splash screen</Text>
    </View>
  );
};
export default SplashScreen;

In this example, the ‘useEffect’ hook is used to navigate to the main screen of the app after the splash screen has been displayed. The ‘navigate’ function takes the name of the screen to navigate to as an argument.

• The React Native Splash screen can be set to display a loading indicator or progress bar to show the user the app’s loading progress. A.K.A. “Splash screen spinner”, you can use the ‘ActivityIndicator’ component from the react-native library. Here’s an example of a code for React Native Splash Screen: 

import React, { useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
const SplashScreen = ({ navigation }) => {
  useEffect(() => {
    // Show the splash screen for 3 seconds before navigating to the main screen
    setTimeout(() => {
      navigation.navigate('Main');
    }, 3000);
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the splash screen</Text>
      <ActivityIndicator size="large" />
    </View>
  );
};
export default SplashScreen;

In this example, the ‘ActivityIndicator’ component is used to render a loading indicator, which will spin while the splash screen is being displayed. The ‘size’ prop is set to ‘large’ to render a larger loading indicator.

To customize it, use the ‘color’ prop to change the color of the spinner and the ‘style’ prop to adjust its size and position. For example:

<ActivityIndicator size="large" color="#0000ff" style={{ marginTop: 16 }} />

Remember you can change the color as you please, mind the design! 

• The React Native splash screen can be customized to display a call to action, such as a button that takes the user to a specific screen or feature within the app. You can also find it as CTA. Use a ‘TouchableOpacity’ component from the ‘react-native’ library to create a tap button to trigger the desired action. Here’s an example:

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
const SplashScreen = ({ navigation }) => {
  const handleCTA = () => {
    // Navigate to the main screen when the CTA is tapped
    navigation.navigate('Main');
  };
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the splash screen</Text>
      <TouchableOpacity onPress={handleCTA}>
        <Text>Get started</Text>
      </TouchableOpacity>
    </View>
  );
};
export default SplashScreen;

A brief know-how-to, the ‘TouchableOpacity’ component is used to render a tap button to start the ‘handleCTA’ function. The ‘handleCTA’ function calls the ‘navigate’ function from the ‘navigation’ prop to navigate to the main screen of the app.

You can customize the background color, font, and other styles of the button of the CTA by using the ‘style’ prop, for example:

<TouchableOpacity
  onPress={handleCTA}
  style={{
    backgroundColor: '#0000ff',
    padding: 12,
    borderRadius: 8,
  }}
>
  <Text style={{ fontSize: 18, color: '#ffffff' }}>Get started</Text>
</TouchableOpacity>

Even though it’s in the glare of the code, this will render a blue button with a padding of 12 pixels, a border radius of 8 pixels, and white text with a font size of 18 pixels. Change the values as you please for you own React Native Splash Screen! 

We’ve come to a closure on React Native Splash Screen, so let’s narrow it down!

To wrap things up, there’s no room to hesitate, not only is using a React Native Splash Screen a must, but it also boosts your brand’s name and position in the market. Remember, you could use AI to get a bit of help, check here for more ideas!

We hope you’ve found this post useful, there’s a plethora of info, and code for you to get hands-on with a React Native Splash Screen, and remember, practice makes perfect!