No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Botón de añadir a favoritos

8/21
Recursos

Aportes 7

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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)

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

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()}
        />
    )
}

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

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);
    }
  }

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;

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