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:
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;
#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 }}
/>
)
}
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;
a alguien mas se le demora mucho tiempo en renderizar los otros 20 elementos en la aplicacion?
Me sale un mensaje de error tratando de usar el navigation:
The action 'NAVIGATE' with payload was not handled by any navigator.
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.
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;
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...
Luis Alejandro Nieto Ruth
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
Buen resumen de la clase, gracias.
Christian Michael Rosales
Jaime La Rosa
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
Pienso que seria bueno realizarlo, pero como dice el compañero Jaime, se puede necesitar mas informacion del pokemon.
Cristian Iñiguez
Víctor Daniel Cardozo Fernández
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
Darío Condori Humerez
Matías Daniel Cravero
Genial! me sirvió mucho tu aporte!!
Ernesto Vladimir Perez Ramos
Gracias
Juan Manuel Orjuela
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
a alguien mas se le demora mucho tiempo en renderizar los otros 20 elementos en la aplicacion?
Jorge Rodrigo Massón Reynoso
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
Profesor¿Me puedes mandar una captura del error?
r2d2bt Barajas Tirado
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
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
Ricardo Andres Ardila Enriquez
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
¿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
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
Se me genera este error
Daniel Rodríguez
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
Tenía el mismo problema, solo verifica que en el PokedexNavigation,js tengas agregado el stack para Pokemon:
Jhunior Eduardo Guevara Lázaro
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
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)
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:
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;
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
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 }} /> ) }
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;