5 Steps to use React Native splash screens:

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.

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

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.

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 the first eye-catching screen that will be displayed when the app is launched.

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 your app’s branding or design. 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. Create pure magic and replace it with any valid color code or name to match the brand design! 

• The logo or other branding elements displayed on the splash screen can be modified to align with your app’s visual identity. 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 renders the logo image, stored in a file named ‘logo.png’ 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 specified dimensions and give it a circular shape. Use your own touch and adjust the values as you like 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 your app’s design. 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 to the brand design to make it eye-catching, so it comes to mind anytime and anywhere. 

• The splash screen duration can be adjusted to control how long it is displayed before the app’s main content appears. You can use the ‘setTimeout’ function to schedule the splash screen to hide after a specified time. 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 set time, as in the example shown earlier. 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 app’s main screen 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 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 that spins while the splash screen is 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 that calls the ‘handleCTA’ function. The ‘handleCTA’ function calls the ‘navigate’ function from the ‘navigation’ prop to navigate to the app’s main screen.

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 12-pixel padding, an 8-pixel border radius, and white text at 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!