Almacenando un Pokémon favorito con AsyncStorage

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

Javier Prieto

student•

Una ayudita nunca viene mal:

npm i @react-native-async-storage/async-storage

Jose Manuel Hernandez De la Cruz

student•

yarn add @react-native-async-storage/async-storage

Horus Sinhue Camacho Avila

student•

Me tuve que regresar un par de clases, no se si el problema que encuentro lo resuelve más adelante, pero en la función para retornar lo que hay en favoritos en la funcion hace el JSON.parse(response || []) lo cual esta mal y va a tirar errores si no hay nada en favoritos, si agregas algo entonces si lo eliminas nuevamente mandaran algo vacío pero muy mal que haya hecho el return directo ahora mismo tengo otro error por el cual me tuve que regresar para tratar de resolverlo pero llevo tres cursos con este maestro y de verdad creo que Platzi debería revisar los contenidos que sube antes de publicarlos, utilizar versiones deprecadas y en las mismas pantallas muestra que la recomendación es no utilizarlas. Puedo entender que los cursos sean de años atrás pero si en el mismo video dice que hay cosas ya solucionadas en la versión correcta de las librerías por que no leer y entender que no debe usarlas?

Roberth Lopez

student•

Me pasa

Luis Gabriel

student•

yo tambien tuve ese error, hice que me retornara un arreglo vacio en caso de error

Luis Enrique Colmenares Rodriguez

student•

@react-native-async-storage/async-storage

Hector Manuel Martinez Moreira

student•

pueden importar con este comando igual

expo install @react-native-async-storage/async-storage

y luego pueden hacer el siguiente importe

import AsyncStorage from '@react-native-async-storage/async-storage';

Nery Alberto Cano Ortigoza

student•

yarn add @react-native-async-storage/async-storage

David Rangel

student•

Les comparto mi repo para esta clase:

Agregué: 1. hook para llamar favoritos 2. hook para eliminar o agregar favoritos 3. condicional para modificar el ícono de corazón si agrega o elimina favoritos 4. libraría de react if para gestionar ícono.

gracias profe, es genial.

David Rangel

student•

Team, por si se preguntaban dónde almacena la información async-storage y si esta información persiste, aquí la respuesta:

Esa función almacena la data en el almacenamiento local del dispositivo (el celular), específicamente en un espacio reservado para tu aplicación.

AsyncStorage es un sistema de almacenamiento de clave-valor asíncrono y no encriptado que viene incluido en React Native. Piensa en él como una pequeña base de datos local para tu app.

Persistencia: La información persiste. Se guarda en el teléfono y permanece ahí incluso si el usuario cierra la aplicación o reinicia el celular. La única manera de que se borre es si el usuario desinstala la app, borra sus datos manualmente, o si tú borras la información con código.
El código: Tus funciones addPokemonFavoriteApi y getPokemonsFavoriteApi usan una clave llamada FAVORITE_STORAGE para guardar y recuperar la información. Es muy importante que sepas que AsyncStorage solo almacena datos como strings, por eso tu función usa JSON.stringify para convertir la lista de Pokémons a un texto antes de guardarla. Cuando recuperes la información, tendrás que convertirla de nuevo a un objeto de JavaScript con JSON.parse.

Nery Alberto Cano Ortigoza

student•

le dio a 2x el profe a esta clase 😅

Almacenando un Pokémon favorito con AsyncStorage

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?