Vista y navegación al detalle del Pokemon

Para navegar entre paginas usamos el siguiente Hook

import { useNavigation } from '@react-navigation/native';

Hacemos una instancia del mismo

const navigation = useNavigation(); 

Lo usamos para navegar entre paginas
Puede recibir dos parametros, el primero el Screen donde queremos ir y el otro los
Parametros que le queremos pasar en un objeto de configuracion que es route.params.

navigation.navigate('Pokemon', { id: pokemon.id });

Podríamos utilizar JSON para pasar el objeto y evitar otra llamada de API pero no se si lo recomiendan para este caso. Por ejemplo:

Convertir el objeto en JSON

navigation.navigate('Pokemon', { pokemon: JSON.stringify(pokemon)});

Convertir el JSON en un objeto de JS

JSON.parse(props.route.params.pokemon)

Si hay alguien aqui usando typescript, es necesario indicar los tipos correctos para que no aparezcan errores en el editor:

1. Primero indicamos los tipos para los parámetros de nuestras pantalla principales en nuestra navegación (en este caso de stack):

   // src/navigation/Pokedexnavigation.tsx
   
   import React from 'react';
   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   
   import Pokedex from '../screens/Pokedex';
   import Pokemon from '../screens/Pokemon';
   
   // tipando los parametros de cada pantalla principal
   export type PokedexStackParamList = {
     Pokedex: undefined;
     Pokemon: {
       id: string;
     };
   };
   
   // podemos mandar este tipado a la funcion createStackNavigator (buena practica)
   const Stack = createNativeStackNavigator<PokedexStackParamList>();
   
   export default function PokedexNavigation() {
     return (...);
   }
   

2. Luego obtenemos el tipado para el useNavigation, usando el tipado de antes y el genérico NativeStackNavigationProp:

   // src/components/PokemonCard.tsx
   
   import { FC } from 'react';
   import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
   import { useNavigation } from '@react-navigation/native';
   import { capitalize } from 'lodash';
   import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
   
   import { getColorByPokemonType } from '../utils/getColorByPokemonType';
   import type { PokedexStackParamList } from '../navigation/PokedexNavigation';
   
   type PokemonCardProps = {
     pokemon: any;
   };
   
   const PokemonCard: FC<PokemonCardProps> = ({ pokemon }) => {
     const navigation = useNavigation<NativeStackNavigationProp<PokedexStackParamList>>();
   
     const goToPokemon = () => {
       navigation.navigate('Pokemon', { id: pokemon.id });
     };
   
     ...
   
     return (...);
   };
   
   ...
   
   export default PokemonCard;
   

Estoy usando la version de react-navigation “^6.1.6”

"@react-navigation/native": "^6.1.6"

En esta version si que puedo enviar todo el objeto con la data del Pokemon

navigation.navigate("Pokemon", { pokemon });

Y la forma en que la recupero es la siguiente:

const { pokemon } = route.params;

Yo preferí tener un solo archivo de navegación

#src/navigation/Navigation.js

import React from "react"
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Icon from "react-native-vector-icons/FontAwesome5"
import Pokedex from "../screens/Pokedex"
import Favorites from "../screens/Favorites"
import Account from "../screens/Account"
import { Image } from "react-native"
import Pokemon from "../screens/Pokemon"

export default function Navigation() {
  const Tab = createBottomTabNavigator()
  const PokemonStack = createNativeStackNavigator();

  const StackPokemon = () => {
    return (<PokemonStack.Navigator>
      <PokemonStack.Screen name="Pokedex" component={Pokedex} options={{ title: "Pokemones", headerTransparent: false }} />
      <PokemonStack.Screen name="Pokemon" component={Pokemon} />
    </PokemonStack.Navigator>
    )
  }

  return (

    <Tab.Navigator>

      <Tab.Screen name="Favorites" component={Favorites} options={{
        tabBarLabel: "Favoritos",
        headerTitle: "Favoritos",
        tabBarIcon: ({ color, size }) => <Icon name="heart" color={color} size={size} />
      }} />
      <Tab.Screen name="StackPokemon" component={StackPokemon} options={{
        tabBarLabel: "",
        headerShown: false,
        tabBarIcon: () => renderImage()
      }} />
      <Tab.Screen name="Account" component={Account} options={{
        tabBarLabel: "Mi cuenta",
        headerTitle: "Mi cuenta",

        tabBarIcon: ({ color, size }) => <Icon name="user" color={color} size={size} />
      }} />

    </Tab.Navigator>

  );
}

function renderImage() {
  return (
    <Image source={require('../assets/pokeball.png')}
      style={{ width: 65, height: 65, top: -15 }}
    />
  )
}

a alguien mas se le demora mucho tiempo en renderizar los otros 20 elementos en la aplicacion?

Si utilizas react-query y configuras el caché, aún haciendo la petición http se usará la cache y no se hará la peticion de no ser necesario.

Se me genera este error

Bueno en caso tal de que solo se pueda mandar texto plano en el navigate, creo que algo que se podemos hacer es enviar el objeto como un string (JSON.stringify) y luego parsearlo (JSON.parse)