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

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.

Deja un comentario