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:

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