Cursos Empresas Blog Live Conf Eventos Precios

0:008:21

Pantalla de favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 11 / 21

Ver clases

Pantalla de favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 11 de 21

Clase 11 / 21

Pantalla de favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 11 / 21

Ver clases

Eddy Huaylla Quispe

Hace 4 años

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".

Pantalla de favoritos

Pantalla de favoritos

Pantalla de favoritos

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Pantalla de favoritos

Pantalla de favoritos

Comentarios

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

Comentarios

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