Botón de añadir a favoritos

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

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;