Sincronizando información entre pantallas

Clase 17 de 21 • Curso de React Native: Formularios, Almacenamiento y Deploy

Julio Cesar Quintero González

student•

La verdad quisiera saber por qué razón se usa Lodash (si agrega peso a la aplicación) pudiendo usarse métodos nativos de Javascript y/o de estilos. Ejemplo, el size (Array.length) el map y el capitalize(En los estilos, textTransform: 'capitalize').

Agustín Navarro Galdon

teacher•

Lodash tiene muchas validaciones y control de error en las funciones simples de JS que en caso de que falle por cualquier cosa que no se haya valorado nuestra app no explotara y seguirá funcionando, esta sería una de las opciones por la cual me gusta usar Lodash, pero su uso es opcional.

Luis Mora

student•

Veo que cuando se inicia sesión y estaba abierta una ventana de Pokemón, no aparece el icono.

Caso contrario si se cierra sesión y estaba abierta una ventana de Pokemón no desaparece el icono.

Esto lo resolví agregando auth en el useEffect, más no estoy seguro si es la forma correcta de hacerlo.

Me encantó el curso y el proyecto

<code> useEffect(() => {
console.log(auth);
navigation.setOptions({
headerRight: () => auth && <Favorite id={pokemon?.id} />,
headerLeft: () => (
<Icon
name=“arrow-left"
color=”#fff"
size={20}
style={{ marginLeft: 20 }}
onPress={navigation.goBack}
/>
),
});
}, [navigation, params, pokemon, auth]);

Cristian Iñiguez

student•

Yo hice exactamente lo mismo, y se ve correcto

Brian Bentancourt

student•

otra forma de hacerlo sin usar loadash:

useFocusEffect(
        useCallback(() => {
            (async () => {
                try {
                    const response = await getPokemonsFavoriteApi()
                    setTotal(response?.length || 0)
                } catch (error) {
                    setTotal(0)
                }
            })()
        }, [])
    )```

Leonardo Valdivieso

student•

Entonces para sincronizar datos entre pantallas hay que usar una api, un storage y un useFocusEffect. Así de sencillo?

Raycris Maldonado

student•

El size de lodash solamente puede ser para arrays planos? no ara arrays de objectos?

Agustín Navarro Galdon

teacher•

Para los dos.

<code> useEffect(() => {
console.log(auth);
navigation.setOptions({
headerRight: () => auth && <Favorite id={pokemon?.id} />,
headerLeft: () => (
<Icon
name=“arrow-left"
color=”#fff"
size={20}
style={{ marginLeft: 20 }}
onPress={navigation.goBack}
/>
),
});
}, [navigation, params, pokemon, auth]);

useFocusEffect(
        useCallback(() => {
            (async () => {
                try {
                    const response = await getPokemonsFavoriteApi()
                    setTotal(response?.length || 0)
                } catch (error) {
                    setTotal(0)
                }
            })()
        }, [])
    )```

Sincronizando información entre pantallas

Sistema de formularios

Descarga el código base del proyecto

Pantalla de Mi cuenta

Formulario de Login

Sistema de formularios avanzados

Implementando Formik y Yup

Iniciando sesión

useAuth: manejo de sesiones con Custom Hooks y React Context

Datos del usuario y logout

Sistema de favoritos

Botón de añadir a favoritos

Almacenando un Pokémon favorito con AsyncStorage

Almacenando varios Pokémon favoritos

Pantalla de favoritos

Toggle en el botón de favoritos

Eliminar Pokémon de favoritos

Lista de Pokémon favoritos

Navegación hacia atrás en favoritos

Logout

Sincronizando información entre pantallas

Pre deploy

Configuración básica antes del BUILD

Cómo generar el APK y AAB para Android

Cómo generar la app para iOS

¿Quieres cursos más avanzados de React Native?