Having a splash screen when your app starts is easy to add to your React Native app with React Navigation.

Maybe you've read the React Navigation docs but still feel stuck. Which navigator should you use, and when? At the end of this article you'll have a good structure for an app with a splash screen that you can build upon.

Let's start with a completely empty app—the one you get by default when creating a Snack. Here it is:

When dealing with navigation and screens I find it helpful to visualize an app as a hierarchy, like a folder structure on a computer. Right now the app is super simple, so it only has one single item in the hierarchy—the App component.

- App

It might look silly now, but let’s start there and add in React Navigation which will be responsible for handling navigation in our app.

The first thing we're going to do is add React Navigation. In package.json, add "react-navigation": "3.8.1" to the dependencies.

{
  "dependencies": {
	"react-navigation": "3.8.1"
  }
}

We’re now going to import the only thing needed to set up an app with React Navigation, an AppContainer. From the React Navigation docs:

Containers are responsible for managing your app state and linking your top-level navigator to the app environment.

In other words, the AppContainer keeps an eye out for stuff that has to do with navigation. When a navigation event happens it’ll make the navigation happen. Without it, the other stuff in React Navigation won’t work.

// App.js (partial)
import { createAppContainer } from 'react-navigation';

class App extends React.Component { ... }

export default createAppContainer(App);

We’ve added React Navigation to our app. Our hierarchy now looks like this.

- AppContainer  (AppContainer)
  - App         (Component)

The AppContainer displays our App component. As you can see, I added the types of components in parentheses. (Component) means that it’s just any regular React component. Now, let’s add the splash screen.

React Navigation provides you with functions to create different types of navigation—drawer navigation, stack navigation, switch navigation, bottom tab navigation—they’re the bread and butter of moving between screens in an app.

These different navigation components are called navigators. You will choose the type of navigator depending on how you want to navigate between screens. Let’s break down how our splash screen navigation is supposed to work.

The splash screen shows up when you start the app, and then it switches over to the app’s main screen.

  1. App starts.
  2. Show splash screen for five seconds.
  3. Switch to main app screen.
  4. Done.

There’s no point in being able to switch back to the splash screen once it’s been displayed, so we’re going to choose a navigator that doesn’t allow “going back”. For this we’re going to use a SwitchNavigator. It’s the simplest of the navigators—it just switches from one screen to another.

Let’s update the hierarchy of our app to visualize the changes we’re going to make.

From this:
- AppContainer  (AppContainer)
  - App         (Component)

To this:
- AppContainer  (AppContainer)
  - Root        (SwitchNavigator)
    - Splash    (Component)
    - App       (Component)

First, add the RootNavigator to the app.

// ...
import {
  createAppContainer,
  createSwitchNavigator
} from 'react-navigation';

class App extends React.Component { ... }

const RootNavigator = createSwitchNavigator({
  App: App
});

export default createAppContainer(RootNavigator);

This won’t make any noticeable difference—the RootNavigator only has one screen in it. Let’s create the splash screen component and add it to the app.

// App.js
// ...
import {
  createAppContainer,
  createSwitchNavigator
} from 'react-navigation';
import SplashScreen from './screens/SplashScreen';

class App extends React.Component { ... }

const RootNavigator = createSwitchNavigator({
  App: App,
  Splash: SplashScreen
}, {
  // `initialRouteName` tells the React Navigation navigator
  // which route to start at. If you don't specify an initial
  // route it'll choose the first route in the navigator config.
  // In this example we tell it to start on the 'Splash' route,
  // otherwise it would have shown the 'App' route.
  initialRouteName: 'Splash'
});

export default createAppContainer(RootNavigator);
// screens/SplashScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const FIVE_SECONDS = 5000;

export default class SplashScreen extends React.Component {
  componentDidMount() {
    // When mounted, wait one second, then navigate to App
    setTimeout(() => {
      // Components that are placed inside a React Navigation
      // navigator will receive the `navigation` prop.
      // It's main usage is to trigger navigation events.
      // Right here we're telling it to navigate to the route
      // with the name 'App'.
      this.props.navigation.navigate('App');
    }, FIVE_SECONDS);
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Text>Splash</Text>
      </View>
    );
  }
}

Et voila! Now the app will show the splash screen first, and after a few seconds it switches to the app.