Site icon Effectus Software Blog

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

Effectus
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: 

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! 

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.

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. 

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.

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.

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! 

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!

Exit mobile version