Botón de añadir a favoritos

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

Kevin Acevedo

student•

Es muy probable que a alguno le salga un error al momento de ingresar a algun pokemon, algo de que no se puede leer las propiedades de undefined, este problema sucede porque el useEffect del rendereo del Header esta antes que el useEffect que trae la informacion del pokemon, por lo que ocurre un pequeno error de asincronismo. Esto se arregla simplemente agregando un pequeno conditional render en el headerRight, dentro del navigation.setOptions, el headerRight quedaria tal que:

headerRight: () => (auth ? <Favorite id={pokemon?.id} /> : null)

Hector Vinasco

student•

Muy buen aporte compañero, ya que efectivamente no se ha actualizado la información de los pokemons en el momento que vas a pasar el id al componente Favorite. Muchas gracias.

Rafael Antonio Pimienta López

student•

También es conveniente agregar como dependencia al useEffect la variable auth, así se actualizará el icono cuando se cierre o inicie sesión, en caso contrario no se actualizará.

Stiven Jiménez

student•

Yo también lo agregué. Me ganaste el comentario

Gustavo Martín Isidoro Shiraishi

student•

Gracias si me sirvió mucho

Eliezer Mas Y Rubi

student•

Archivo de Favoritos

import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5'

export default function Favorite({ pokemonId }) {
    console.log(pokemonId)

    const addFavorite = () => {
        console.log('add to favorite')
    }
    return (
        <Icon
            name='heart'
            color='#fff'
            size={20}
            onPress={() => addFavorite()}
        />
    )
}

Karen Velásquez

student•

No se si es error del inicio pero a la hora de pasar del login a la pokedex no cargaaparece un "Network request failed"

Karen Velásquez

student•

Ahora en medio del avance la pagina de pokedex aparece en blanco, ahhh :ccc

David Rangel

student•

Puede que sea la API, lo puedes revisar con la Chrome Dev Tool en la pestaña de "Network". Aquí hay un tutorial en inglés de cómo usarla:

ZANONI ALFREDO SALAS TOBÓN

student•

¿La sesión no se guarda en el storage?

Daniel Ochoa

student•

El error, se soluciona simplmente agregandole a las dependencias el pokemon, cuando cambia el pokemon la navegación se refresca con sus nuevos datos.

Nicolas Valdez

student•

En mi caso prefiero que el corazón esté siempre dibujado pero si no está logeado, se active un popUp que lo avise. Además de que estoy usando Redux para manejar los estados.

const { auth } = useSelector((state: any) => state.account);
  const { currentUser } = useSelector((state: any) => state.currentUser);

  const handleFavorite = () => {
    if(auth){
      console.log("ID: ", currentUser.id)
    }else{
      ToastAndroid.show("You need to log in to use this feature.", ToastAndroid.LONG);
    }
  }

Gustavo Pú

student•

Archivo Pokemon.js

import { ScrollView } from "react-native";
import React, { useState, useEffect } from "react";
import { getPokemonDetailsApi } from "../api/pokemon";
import Header from "../components/Pokemon/Header";
import Type from "../components/Pokemon/Type";
import Stats from "../components/Pokemon/Stats";
import Icon from "react-native-vector-icons/FontAwesome5";
import Favorite from "../components/Pokemon/Favorite";
import useAuth from "../hooks/useAuth";

const Pokemon = (props) => {
  const {
    navigation,
    route: { params },
  } = props;

  const [pokemon, setPokemon] = useState(null);
  const {auth} = useAuth();

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

  useEffect(() => {
    (async () => {
      try {
        const response = await getPokemonDetailsApi(params.id);
        setPokemon(response);
      } catch (error) {
        navigation.goBack();
      }
    })();
  }, [params]);

  if (!pokemon) return null;
  return (
    <ScrollView>
      <Header
        name={pokemon.name}
        order={pokemon.order}
        image={pokemon.sprites.other["official-artwork"].front_default}
        type={pokemon.types[0].type.name}
      />
      <Type types={pokemon.types} />
      <Stats stats={pokemon.stats} />
    </ScrollView>
  );
};

export default Pokemon;

David Rangel

student•

Les comparto el repo que hice de la clase a agosto del 2025:

En esta versión no ocurre la intermitencia del final de la clase ya que los componentes se comunican a través de la store de zustand.

Vladimir Hener Steve Sanchez Astoray

student•

Buenas noches pero a mi no me sale el icono del corazon, hice todos los pasos y nada, lo volvi a recargar todo y nada... alguien que me ayude porfavor! 😫😓

Vladimir Hener Steve Sanchez Astoray

student•

encontre el problema era que habia colocado una s en headerRights, en ves de colocar headerRight jajajjaa 🤣🤣🤣🤣

Gianella Marin

student•

Hola! No sé porque razon en un comienzo me funcionaba y ahora no, no sé que toqué. El botón de "volver" y el de "Favoritos" que están en el header no me reaccionan, alguien sabe porque puede ser?

Gianella Marin

student•

pude solucionarlo, resulta que el headerTransparent que tenia el navigation de Pokemon estaba evitando que se pueda seleccionar.

import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5'

export default function Favorite({ pokemonId }) {
    console.log(pokemonId)

    const addFavorite = () => {
        console.log('add to favorite')
    }
    return (
        <Icon
            name='heart'
            color='#fff'
            size={20}
            onPress={() => addFavorite()}
        />
    )
}

const { auth } = useSelector((state: any) => state.account);
  const { currentUser } = useSelector((state: any) => state.currentUser);

  const handleFavorite = () => {
    if(auth){
      console.log("ID: ", currentUser.id)
    }else{
      ToastAndroid.show("You need to log in to use this feature.", ToastAndroid.LONG);
    }
  }

import { ScrollView } from "react-native";
import React, { useState, useEffect } from "react";
import { getPokemonDetailsApi } from "../api/pokemon";
import Header from "../components/Pokemon/Header";
import Type from "../components/Pokemon/Type";
import Stats from "../components/Pokemon/Stats";
import Icon from "react-native-vector-icons/FontAwesome5";
import Favorite from "../components/Pokemon/Favorite";
import useAuth from "../hooks/useAuth";

const Pokemon = (props) => {
  const {
    navigation,
    route: { params },
  } = props;

  const [pokemon, setPokemon] = useState(null);
  const {auth} = useAuth();

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

  useEffect(() => {
    (async () => {
      try {
        const response = await getPokemonDetailsApi(params.id);
        setPokemon(response);
      } catch (error) {
        navigation.goBack();
      }
    })();
  }, [params]);

  if (!pokemon) return null;
  return (
    <ScrollView>
      <Header
        name={pokemon.name}
        order={pokemon.order}
        image={pokemon.sprites.other["official-artwork"].front_default}
        type={pokemon.types[0].type.name}
      />
      <Type types={pokemon.types} />
      <Stats stats={pokemon.stats} />
    </ScrollView>
  );
};

export default Pokemon;

Botón de añadir a 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?