Crear un Splash Screen personalizada en React Native (funciona con web, Android, iOS)

Tiempo de lectura: 2 minutos

Sí, queremos crear un Splash Screen personalizada en nuestra APP de React Native lo primero que tenemos que hacer es crear dos Screen, uno va a ser el Splash Screen y otro la primera pantalla de la APP.

En APP.js añadimos un stack navigation con las pantallas (Splash Screen y Principal):

Si quieres saber como utilizar la navegación entre pantallas en React Native lo explicamos en este artículo Navegar entre screens con 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';

//Importar pantallas
import Principal from './screens/Principal';
import SplashScreen from './screens/SplashScreen';

const Stack = createNativeStackNavigator();

//Crear un componente llamado 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>)
};

//Exporta el componente
export default App;

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

Ahora creamos la pantalla SplashScreen.js dentro de la carpeta screens

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

const SplashScreen = ({ navigation }) => {

    //Cuando pasen 3 segundos se navega a la pantalla Menu
    setTimeout(() => {
        //Elimina splash screen del 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',
    }
});

Ahora explico el código que he creado.

La pantalla Splash Screen se va a mostrar 3 segundos. Para ello utilizo un contador y cuándo finaliza, reemplaza la pantalla Splash por la pantalla Principal (es la siguiente pantalla que queremos que muestre nuestra APP).

 setTimeout(() => {
        //Elimina splash screen del stack
        navigation.replace('Principal');
    }, 3000);

*El tiempo se indica en ms (3000) == 3s.

Dentro del View podremos añadir lo que queramos, un Texto como en el ejemplo, una imagen, un vídeo o animación…

Y así de sencillo es crear un Splash Screen para nuestras APPs.