Vista y navegación al detalle del Pokemon

Clase 12 de 17 • Curso de React Native: Manejo de Listas y Consumo de APIs

Luis Alejandro Nieto Ruth

student•

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

Luis Fernando Pedroza Taborda

student•

Buen resumen de la clase, gracias.

Christian Michael Rosales

student•

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)

Jaime La Rosa

student•

Si lo datos que necesita son exactamente los mismos no veo por que no, pero seguramente en la pagina de detalles va a querer mostrar mas información del pokemon que la disponible en la lista por lo que tendrá que hacer una llamada a la API en ese caso

Luis Fernando Pedroza Taborda

student•

Pienso que seria bueno realizarlo, pero como dice el compañero Jaime, se puede necesitar mas informacion del pokemon.

Cristian Iñiguez

student•

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

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

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;

Víctor Daniel Cardozo Fernández

student•

Muchas gracias por tu aporte !!! Justo me faltaba el paquete de @react-navigation/native-stack y ya con eso pude arreglar el resto de errores de Typescript :D

Vladimir Farrera Vera

student•

buen aporte pero tu

type PokemonCardProps = {
  pokemon: any;
};

Lo podrias cambiar por un

export interface TiposDatosPokemon{
  id: string,
  name:string,
  type: string,
  order : number,
  imagen:string,
}

yo lo cree en el pokedex donde llamamos los datos de la API y lo exporto para que no tengas que usar any

Darío Condori Humerez

student•

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

Matías Daniel Cravero

student•

Genial! me sirvió mucho tu aporte!!

Ernesto Vladimir Perez Ramos

student•

Gracias

Juan Manuel Orjuela

student•

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;

Sergio Camilo Castillo Nuñez

student•

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

Jorge Rodrigo Massón Reynoso

student•

Me sale un mensaje de error tratando de usar el navigation:

The action 'NAVIGATE' with payload was not handled by any navigator.

Agustín Navarro Galdon

teacher•

¿Me puedes mandar una captura del error?

r2d2bt Barajas Tirado

student•

The action 'NAVIGATE' with payload {"name":"Pokemon","params":{"id":5}} was not handled by any navigator.

Do you have a screen named 'Pokemon'?

David Rangel

student•

Algunas cosas cambian para la versión de RN a Julio de 2025. Les dejo mi repo:

Cambia: 1. Como configurar la nueva pestaña de Pokémon. 2. Como mandar y recibir las props por el router.

David Rangel

student•

Para Julio del 2025, para enviar y llamar la info por el router, cambia un poco (tomando en cuenta que en mis apps no uso props genéricas).import { useRouter } from 'expo-router';import { Image, Pressable, StyleSheet, Text, View } from 'react-native';import { useLocalSearchParams } from 'expo-router';import { StyleSheet, Text, View } from 'react-native'; const Pokemon = () => { const params = useLocalSearchParams(); const pokeId = String(params.id); const pokeName = params.name; return ( <View> <Text style={styles.PokemonName}> Estamos en el Pokemon: {pokeName}</Text> <Text style={styles.PokemonId}> El ID del Pokemon: {pokeId}</Text> </View> );}; const styles = StyleSheet.create({ PokemonName: { color: 'white', }, PokemonId: { color: 'white', },}); export default Pokemon; import { capitalize } from '@/utils/capitalize';import { getColourByPokemonType } from '@/utils/getColourByPokemonType';import { PokemonFinalData } from '@/utils/types/PokeTypes'; const PokemonCard: React.FC<PokemonFinalData> = ({ ...PokemonFinalData }) => { const router = useRouter(); const PokemonColour: string = getColourByPokemonType(PokemonFinalData.types); const bgStyles = { backgroundColor: PokemonColour, ...styles.Background }; const goToPokemon = () => { router.push({ pathname: '/pokemon', params: { id: PokemonFinalData.id, name: PokemonFinalData.name, }, }); }; Así se mandan:

import { useRouter } from 'expo-router';
import { Image, Pressable, StyleSheet, Text, View } from 'react-native';

import { capitalize } from '@/utils/capitalize';
import { getColourByPokemonType } from '@/utils/getColourByPokemonType';
import { PokemonFinalData } from '@/utils/types/PokeTypes';

const PokemonCard: React.FC<PokemonFinalData> = ({ ...PokemonFinalData }) => {
  const router = useRouter();

  const PokemonColour: string = getColourByPokemonType(PokemonFinalData.types);
  const bgStyles = { backgroundColor: PokemonColour, ...styles.Background };

  const goToPokemon = () => {
    router.push({
      pathname: '/pokemon',
      params: {
        id: PokemonFinalData.id,
        name: PokemonFinalData.name,
      },
    });
  };
```Así se llaman:
```js
import { useLocalSearchParams } from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';

const Pokemon = () => {
  const params = useLocalSearchParams();
  const pokeId = String(params.id);
  const pokeName = params.name;
  return (
    <View>
      <Text style={styles.PokemonName}> Estamos en el Pokemon: {pokeName}</Text>
      <Text style={styles.PokemonId}> El ID del Pokemon: {pokeId}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  PokemonName: {
    color: 'white',
  },
  PokemonId: {
    color: 'white',
  },
});

export default Pokemon;

Ricardo Andres Ardila Enriquez

student•

para evitar hacer un nuevo fetch de la informacion del pokemon no se podria convertir el objeto en un string (stringify) para que lo soporte el navigate y luego en la pantalla de pokemon hacer el parse? asi no se evitaria el llamado extra, aunque la verdad no se que seria mas eficiente...

Ismael Eliezer López Castrejón

student•

¿Están perdidos algunos videos?

Hay varios que no encuentro y se dificulta comprender algo con la información incompleta :/

Wilmer David Cedeño Mendoza

student•

A la fecha que estoy escribiendo esto. Noviembre 2023 le pase todo el objeto y no hubo problema pasando todo el objeto pokemon. Estoy usando la version 6

Deyvid Antonio Arauz Cruz

student•

Se me genera este error

Daniel Rodríguez

student•

Te sugiero revisar el curso #4 ahi se crea el stack de navegación, quizá te ayude a resolver el error.

Kenet Andrés Chungandro Montenegro

student•

Tenía el mismo problema, solo verifica que en el PokedexNavigation,js tengas agregado el stack para Pokemon:

Jhunior Eduardo Guevara Lázaro

student•

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.

Juan Riquelme

student•

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)

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

// 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;

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

import { useRouter } from 'expo-router';
import { Image, Pressable, StyleSheet, Text, View } from 'react-native';

import { capitalize } from '@/utils/capitalize';
import { getColourByPokemonType } from '@/utils/getColourByPokemonType';
import { PokemonFinalData } from '@/utils/types/PokeTypes';

const PokemonCard: React.FC<PokemonFinalData> = ({ ...PokemonFinalData }) => {
  const router = useRouter();

  const PokemonColour: string = getColourByPokemonType(PokemonFinalData.types);
  const bgStyles = { backgroundColor: PokemonColour, ...styles.Background };

  const goToPokemon = () => {
    router.push({
      pathname: '/pokemon',
      params: {
        id: PokemonFinalData.id,
        name: PokemonFinalData.name,
      },
    });
  };
```Así se llaman:
```js
import { useLocalSearchParams } from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';

const Pokemon = () => {
  const params = useLocalSearchParams();
  const pokeId = String(params.id);
  const pokeName = params.name;
  return (
    <View>
      <Text style={styles.PokemonName}> Estamos en el Pokemon: {pokeName}</Text>
      <Text style={styles.PokemonId}> El ID del Pokemon: {pokeId}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  PokemonName: {
    color: 'white',
  },
  PokemonId: {
    color: 'white',
  },
});

export default Pokemon;

Vista y navegación al detalle del Pokemon

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación