Create a Custom Splash Screen in React Native (works with web, Android, iOS)

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

If we want to create a custom Splash Screen in our React Native app, the first thing we need to do is create two screens: one for the Splash Screen and another for the main screen of the app.

In APP.js, we add a stack navigation with the screens (Splash Screen and Main):

If you want to learn how to use screen navigation in React Native, we explain it in this article Navigate between screens with React Native

import React from "react";
import { View, StyleSheet } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// Import screens
import Principal from './screens/Principal';
import SplashScreen from './screens/SplashScreen';

const Stack = createNativeStackNavigator();

// Create a component called APP
const App = () => {

    return (
        <View style={styles.container}>
            <NavigationContainer >
                <Stack.Navigator initialRouteName="Splash">
                    <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
                    <Stack.Screen name="Principal" component={Principal} options={{ headerShown: false }} />
                </Stack.Navigator>
            </NavigationContainer>
        </View>)
};

// Export the component
export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

Now we create the SplashScreen.js screen inside the screens folder:

import React from "react";
import { View, StyleSheet, Text } from "react-native";

const SplashScreen = ({ navigation }) => {

    // After 3 seconds, navigate to the Menu screen
    setTimeout(() => {
        // Remove the splash screen from the stack
        navigation.replace('Principal');
    }, 3000);

    return (
        <View style={styles.container}>
            <Text>Splash Screen</Text>
          </View>
    )
};

export default SplashScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

Now I’ll explain the code I’ve created:

The SplashScreen screen will be displayed for 3 seconds. To achieve this, I use a timer, and when it finishes, I replace the Splash screen with the Principal screen (which is the next screen we want our app to show).

 setTimeout(() => {
        // Remove the splash screen from the stack
        navigation.replace('Principal');
    }, 3000);

*The time is indicated in ms (3000) == 3s.

Inside the View, we can add whatever we want: text, an image, a video, or an animation…

And that’s how simple it is to create a Splash Screen for our apps.

Post Views: 3

Leave a Comment