Pantalla de favoritos

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

Fabian David Dueñas Garcia

student•

El componente de <Icon /> tambien acepta la propiedad solid. Podemos usar esta propiedad para cambiar el estilo del corazón. Quedaría algo como esto:

!code

Daniel Ochoa

student•

Aplica para FontAwesome5 no para todos, toca leer la documentación según cual estes usando, para saber que propieades podria recibir.

Luciano Cavallo

student•

Hasta ahora para lo que utilizamos lodash, son cosas ya nativas en JS (Array.prototype.includes()) y en CSS (textTransform: 'capitalize'). Por lo que includes se puede usar sobre el array response: response.includes(id)

Pedro Roberto Capriles Morales

student•

Es recomendable no usar lodash ya que es una libreria bastante pesada para este caso es mejor usar la Api de javascript que dentro del prototype de los objetos Array tiene la función include

const exist = async (id) => {
  try {
    const favorites = await get();
    return favorites.includes(id);
  } catch (ex) {
    throw ex;
  }
};```

Kevin Parra Lopez

student•

Yo utilice lottie y react-tostify para que no se vea tan estico todo

Raycris Maldonado

student•

Si alguien tiene problemas para con el boton de favortios en Android es porque el "AsyncStorage" esta deprecado y la forma en la que lo estamos importando no es la correcta.

Esta es la forma correcta: import AsyncStorage from '@react-native-community/async-storage'

Rafael Antonio Pimienta López

student•

El que esta deprecado es el que viene con react-native.

En esta página de Github se ve que el paquete que instalamos aún sigue activo:

https://github.com/react-native-async-storage/async-storage

Hans Trauwitz

student•

https://www.npmjs.com/package/@react-native-async-storage/async-storage donde esta depricado?

Gera Garcia

student•

Si no les funciona chekeen haber escrito bien 'includes'

Daniel Ochoa

student•

Yo lo manejo con Ionicons de la siguiente manera:

import Icon from 'react-native-vector-icons/Ionicons'

<Icon name={isFavorite ? 'heart-sharp' : 'heart-outline'} size={20} color="#f0f0f0" style={styles.favorite_icon} onPress={handleFavorite} />

Jojhan Perez Arroyave

student•

Otra forma de adaptar el color es con isFavorite, de la siguiente manera:

Eddy Huaylla Quispe

student•

components/Pokemon/Favorite.js

import React, { useEffect, useState } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5'
import { addPokemonFavoriteApi, isPokemonFavoriteApi } from '../../../services/favorite';

export const Favorite = ( { pokemonId } ) => {
	const [ isFavorite, setIsFavorite ] = useState( undefined );

	useEffect( () => {
		( async () => {
			try {
				const response = await isPokemonFavoriteApi( pokemonId );
				setIsFavorite( response )
			} catch (error) {
				setIsFavorite( false )
			}
		})();
	}, [ pokemonId ] )

	const addFavorite = () => {
		addPokemonFavoriteApi( pokemonId );
	}

	const removeFavorite = () => {
		console.log( 'Eliminar de favoritos' )
	}

	return (
		<Icon
			name='heart'
			color='#fff'
			size={ 20 }
			style={ { marginRight: 20 } }
			solid= { isFavorite }
			onPress={ () => isFavorite ? removeFavorite() : addFavorite() }
		/>
	)
}

api/favorite,js

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

import { FAVORITE_STORAGE } from "../utils/constants";

export const getPokemonsFavoriteApi = async () => {
	try {
		const response = await AsyncStorage.getItem( FAVORITE_STORAGE );
		return JSON.parse( response || '[]' );
	} catch (error) {
		throw error;
	}
}

export const addPokemonFavoriteApi = async ( id ) => {
	try {
		const favorites = await getPokemonsFavoriteApi();
		favorites.push(id);
		await AsyncStorage.setItem( FAVORITE_STORAGE, JSON.stringify( favorites ) );
	} catch (error) {
		throw error;
	}
}

export const isPokemonFavoriteApi = async ( id ) => {
	try {
		const favorites = await getPokemonsFavoriteApi();
		return favorites.includes(id);
	} catch (ex) {
		throw ex;
	}
};

Nota: En caso de icono no se estan importando 2 librerias, solo se está usando la propiedad "solid".

import React, { useEffect, useState } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5'
import { addPokemonFavoriteApi, isPokemonFavoriteApi } from '../../../services/favorite';

export const Favorite = ( { pokemonId } ) => {
	const [ isFavorite, setIsFavorite ] = useState( undefined );

	useEffect( () => {
		( async () => {
			try {
				const response = await isPokemonFavoriteApi( pokemonId );
				setIsFavorite( response )
			} catch (error) {
				setIsFavorite( false )
			}
		})();
	}, [ pokemonId ] )

	const addFavorite = () => {
		addPokemonFavoriteApi( pokemonId );
	}

	const removeFavorite = () => {
		console.log( 'Eliminar de favoritos' )
	}

	return (
		<Icon
			name='heart'
			color='#fff'
			size={ 20 }
			style={ { marginRight: 20 } }
			solid= { isFavorite }
			onPress={ () => isFavorite ? removeFavorite() : addFavorite() }
		/>
	)
}

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

import { FAVORITE_STORAGE } from "../utils/constants";

export const getPokemonsFavoriteApi = async () => {
	try {
		const response = await AsyncStorage.getItem( FAVORITE_STORAGE );
		return JSON.parse( response || '[]' );
	} catch (error) {
		throw error;
	}
}

export const addPokemonFavoriteApi = async ( id ) => {
	try {
		const favorites = await getPokemonsFavoriteApi();
		favorites.push(id);
		await AsyncStorage.setItem( FAVORITE_STORAGE, JSON.stringify( favorites ) );
	} catch (error) {
		throw error;
	}
}

export const isPokemonFavoriteApi = async ( id ) => {
	try {
		const favorites = await getPokemonsFavoriteApi();
		return favorites.includes(id);
	} catch (ex) {
		throw ex;
	}
};

Pantalla de favoritos

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?