Y si deseas hacer una pantalla custodia de SplashScreen como se hace, donde? Se puede poner animación?

Wilson Fabian Pérez Sucuzhañay

Wilson Fabian Pérez Sucuzhañay

Pregunta
student
hace 4 años

Y si deseas hacer una pantalla custodia de SplashScreen como se hace, donde? Se puede poner animación?

2 respuestas
    Andres Roberto Coello Goyes

    Andres Roberto Coello Goyes

    student
    hace 4 años

    Si no quieres usar dependencias puedes envolver tu app en un context que te diga si esta en splash o no, la primero pantalla de tus rutas seria el splash por defecto y despues de X segudos cambias el estado de splash a false por ejemplo con eso se renderizara a la prixima ruta que podria ser tu home.

    CONTEXT JS

    import React, {createContext, useState, useEffect, Alert} from 'react'; export const UserContext = createContext(); const UserProvider = ({children}) => { const [isSplash, setIsSplash] = useState(false); useEffect(() => { if (!isSplash) { setTimeout(() => { setIsSplash(true); }, 11000); } }, [isSplash]); return ( <UserContext.Provider value={{ isSplash }}> {children} </UserContext.Provider> ); }; export default UserProvider;

    NAVIGATION APP

    <Stack.Navigator initialRouteName="SplashScrenn" screenOptions={({navigation}) => ({ headerStyle: {backgroundColor: colors.primary}, headerTitleAlign: 'center', headerTintColor: 'white', headerShown: false, headerLeft: () => ( <Icon size={27} style={{marginLeft: 10}} name="arrowleft" color="#fff" onPress={() => navigation.goBack()} /> ), })}> {!isSplash && <Stack.Screen name="SplashScrenn" component={SplashView} />} {!user && isSplash ? ( <> <Stack.Screen name="Login" component={LoginView} /> <Stack.Screen name="SignUp" options={{headerTitle: 'Registro'}} component={SignUpView} /> <Stack.Screen name="ForgotPass" component={ForgotPasswordView} /> <Stack.Screen name="Terminos" component={TerminosView} /> <Stack.Screen name="Privacidad" component={PrivacidadView} /> </> <Stack.Navigator />

    Espero te ayude

Curso de React Native: Formularios, Almacenamiento y Deploy

Curso de React Native: Formularios, Almacenamiento y Deploy

¡Aprende a trabajar con formularios, almacenamiento local y deploy en React Native! Integra Formik y Yup en tu app para manejar los formularios de autenticación. Guarda tus Pokemon favoritos usando AsyncStorage. Genera el build de tu aplicación para Android o iOS usando Expo.

Curso de React Native: Formularios, Almacenamiento y Deploy
Curso de React Native: Formularios, Almacenamiento y Deploy

Curso de React Native: Formularios, Almacenamiento y Deploy

¡Aprende a trabajar con formularios, almacenamiento local y deploy en React Native! Integra Formik y Yup en tu app para manejar los formularios de autenticación. Guarda tus Pokemon favoritos usando AsyncStorage. Genera el build de tu aplicación para Android o iOS usando Expo.