Stack de navegación para Pokedex

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

Miguel Hernández

student•

Si usan Android y les aparece el header del Tab y el de Stack lo pueden quitar con esa opción en el Tab.Navigator No se si solo a mi me paso por usar ReactNative CLI.

screenOptions={{ headerShown: false }}

Camilo José Mezú Mina

student•

Es porque tienes la ultima version de react navigation (6), mientras que el profe esta en la 5 CAMBIOS

Luis Fernando Pedroza Taborda

student•

Me paso lo mismo que tu porque tengo la ultima version de react navigation, agregue esa linea pero no toma el nombre “title” que se configura en options, entonces la forma de solucionarlo es agregando "headerTitle: "Favoritos" en el tab.screen de Navigation.js.

Wilfred Vásquez

student•

Para la versión 6 de react-navigation no es necesario crear un componente de Navigation para cada sección con el fin de cambiar el título. En el mismo Navigation.js se puede pasar como opción headerTitle: "Favoritos". Ejemplo:

<Tab.Navigator>
            <Tab.Screen 
                name="Favorite"
                component={FavoriteScreen} 
                options={{
                    tabBarLabel:"Favoritos",
                    tabBarIcon: ({ color, size }) => <Icon name="heart" color={color} size={size} />,
                    headerTitle: "Favoritos"
                }}
            />
            <Tab.Screen 
                name="Pokedex"
                component={PokedexScreen}
                options={{
                    tabBarLabel:"",
                    tabBarIcon: () => renderPokeball(),
                    headerTitle: "Pokedexxx"
                }}
            />
            <Tab.Screen 
                name="Account"
                component={AccountScreen}
                options={{
                    tabBarLabel:"Mi cuenta",
                    tabBarIcon: ({ color, size }) => <Icon name="user" color={color} size={size} />,
                    headerTitle: "Mi cuenta"
                }}
            />
        </Tab.Navigator>```

Luis Fernando Pedroza Taborda

student•

Muchas gracias, excelente aporte, ayudo a resolver el problema del nombre tanto en el header del Tab como en el de Stack.

Adriel Gomez

student•

Claro, al usar el Stack dentro del Navigation.js se te creaban dos Headers con el titulo. Como hiciste para creat el stack dentro de la Pokedex para que tmbn puedas ir a la Ruta del Pokemon?

Matías Daniel Cravero

student•

Realmente es una pena que dejen pasar tanto tiempo para actualizar los cursos, como dijo un compañero, en la versión 6 de Tab Navegation, ya no es necesario todo lo que hace en los primeros 7 min!

Gera Garcia

student•

Les dejo como quedaría el stack para ver los pokemones con la v6.x de Stack Navigation para navegar entre los pokemones que tengas:

Navigation.js

import React from 'react';
import { Image } from "react-native"
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Icon from "react-native-vector-icons/FontAwesome5";

import FavoriteNavigation from './FavoriteNavigation';
import PokedexNavigation from './PokedexNavigation';
import AccountNavigation from './AccountNavigation';

const Tab = createBottomTabNavigator();

export default function Navigation() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Favoritex"
        component={FavoriteNavigation}
        options={{
          tabBarLabel: "Favoritrix",
          tabBarIcon: ({ color, size }) => (
            <Icon name="heart" color={color} size={size} />),
          headerTitle: "Favoritix",
          headerShown: false
           }}      />

      <Tab.Screen
        name="Pokedexa"
        component={PokedexNavigation}
        options={{
          tabBarLabel: "",
          tabBarIcon: () => renderPokeball(),
          headerShown: false
        }}
      />

      <Tab.Screen
        name="Mi cuenta"
        component={AccountNavigation}
        options={{
          tabBarLabel: "Account",
          tabBarIcon: ({ color, size }) => (
            <Icon name="user" color={color} size={size} />),
          headerTitle: "Account",
          headerShown: false
           }}      />
    </Tab.Navigator>
  );
}

function renderPokeball() {
  return(
    <Image
      source={require('../assets/pokeball.png')}
      style={{ width: 57, height: 57/* top: -1 */ }}
    />
  )
}

PokedexNavigation.js

import React from 'react'
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import PokedexScreen from "../screens/Pokedex";
import PokemonScreen from "../screens/Pokemon";

const Stack = createNativeStackNavigator();

export default function PokedexNavigation() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Pokedex" component={PokedexScreen}/>
      <Stack.Screen name="Pokemon" component={PokemonScreen}/>
    </Stack.Navigator>
  );
}

Pokemon.js

import React from 'react';
import { View, Text } from 'react-native';


export default function Pokemon() {
  return (
    <View>
      <Text>Estas viendo un POKEMON</Text>
    </View>
  )
}

Cambié algunos nombres para reconocer donde se aplica el cambio

Franklin Reyes

student•

Muchas Gracias! solo cambiar el createStackNavigator por createNativeStackNavigator y todo funcionó perfecto.

Norge Santana Gonzalez

student•

Si estas en Android y quieres que el titulo del header este centrado usa este codigo en options tambien


headerTitleAlign: 'center'

Cid Emmanuel Esquivel González

student•

Si estas viendo esto en 2023/2024 y usas la version 6 de React Navigation toma en cuenta lo siguiente:

No necesitas crear los archivos AccountNavigation.js ni FavoriteNavigation.js (Ya viene el header por default).
Si necesitas crear el archivo PokedexNavigation.js ya que usaremos dos "screens".
Oculta los headers de PkemonScreen y PokedexScreen (ya que el title lo podemos poner directamente en Navigation en el Tab de Pokedex.
El código queda de la siguiente manera:
Fragmento de Navigation.jsx:

export default function Navigation() { 
  return (
    <Tab.Navigator>

        <Tab.Screen 
          name="Favourites" 
          component={FavouritesScreen}
          options={{
            tabBarLabel: "Favoritos",
            tabBarIcon: ({color, size}) => (
              <Icon name='heart' color={color} size={size} />
            ),
            title: "Favoritos",
          }}
        />

        <Tab.Screen 
          name="Pokedex"
          component={PokedexNavigation}
          options={{
            tabBarLabel: "",
            tabBarIcon: () => renderPokeball(),
            title: "Pokedex"
          }}
        />

        <Tab.Screen 
          name="Account"
          component={AccountScrenn}
          options={{
            tabBarLabel: "Cuenta",
            tabBarIcon: ({color, size}) => (
              <Icon name='circle' color={color} size={size} />
            ),
            title: "Cuenta"
          }}
        />
    </Tab.Navigator>
  );
}
```**PokedexNavigation.jsx**:

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import PokedexScreen from '../screens/Pokedex';
import PokemonScreen from '../screens/Pokemon';

const Stack = createNativeStackNavigator();

export default function PokedexNavigation() {
  return (
    <Stack.Navigator>
        <Stack.Screen 
            name="Pokemom" 
            component={PokemonScreen}
            options={{
                headerShown: false
            }}
        />
        <Stack.Screen 
            name="PokedexChild" 
            component={PokedexScreen}
            options={{
                headerShown: false
            }}
        />
    </Stack.Navigator>    
  );
}

José Gregorio Estrada Meneses

student•

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import FavoriteScreen from "../screens/Favorite";

const Stack = createStackNavigator();

export default function FavoriteNavigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <Stack.Screen
        name="Favorite"
        component={FavoriteScreen}
        options={{
          title: "Favoritos"
        }}
      />
    </Stack.Navigator>
  );
}

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import PokedexScreen from "../screens/Pokedex";
import PokemonScreen from "../screens/Pokemon";

const Stack = createStackNavigator();

export default function PokedexNavigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <Stack.Screen name="Pokemon" component={PokemonScreen} />
      <Stack.Screen name="Pokedex" component={PokedexScreen} />
    </Stack.Navigator>
  );
}

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import AccountScreen from "../screens/Account";

const Stack = createStackNavigator();

export default function AccountNavigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <Stack.Screen
        name="Account"
        component={AccountScreen}
        options={{title: "Mi cuenta" }}
      />
    </Stack.Navigator>
  );
}

import React from "react";
import { View, Text } from "react-native";

export default function Pokemon() {
  return (
    <View>
      <Text>Estamos en un POKEMON</Text>
    </View>
  );
}

import React from "react";
import { Image } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Icon from "react-native-vector-icons/FontAwesome5";
import FavoriteNavigation from "./FavoriteNavigation";
import PokedexNavigation from "./PokedexNavigation";
import AccountNavigation from "./AccountNavigation";

const Tab = createBottomTabNavigator();

function renderPokeball() {
  return (
    <Image
      source={require("../assets/pokeball.png")}
      style={{ width: 75, height: 75, top: -15 }}
    />
  );
}

export default function Navigation() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Favorite"
        component={FavoriteNavigation}
        options={{
          tabBarLabel: "Favoritos",
          tabBarIcon: ({ color, size }) => (
            <Icon name="heart" color={color} size={size} />
          ),
        }}
      />

      <Tab.Screen
        name="Pokedex"
        component={PokedexNavigation}
        options={{
          tabBarLabel: "",
          tabBarIcon: () => renderPokeball(),
        }}
      />

      <Tab.Screen
        name="Account"
        component={AccountNavigation}
        options={{
          tabBarLabel: "Mi cuenta",
          tabBarIcon: ({ color, size }) => (
            <Icon name="user" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

Gustavo Pú

student•

si tienen problemas en que se les repide el Header con esto desactive para que aplique los cambios de createStackNavigator

import { SafeAreaView, View, Text } from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";

const Favorite = () => {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);
  return (
    <SafeAreaView>
      <Text>Favorite</Text>
    </SafeAreaView>
  );
};

export default Favorite;

Matias Ozuna Baez

student•

Heroe!!

Fabian Grajales

student•

tengo la version 0.71 de react, el y el stack navigation no fue necesario hacerlo en el android, no estoy seguro como es en ios, esto es porque ya estaba el stack hecho, lo que hice fue agregar esta linea headerTitleAlign: "center", debajo del tabBarLabel: "Favoritos" para alinear el titulo al centro:

tabBarLabel: "Favoritos",
headerTitleAlign: "center",

Michael Nassee Buritica Ortega

student•

Muchas gracias me funciono

Kenet Andrés Chungandro Montenegro

student•

Les dejo una captura de mi Navigation.js

Gabriel Hernández Valdez

student•

Hola Compañeros, ( al 25/03/22) ya que se ha actualizado navigate a la versión 6, por si llegan a tener alguna dificultad les ire dejando el código que vaya trabajando en el siguiente repositorio: https://github.com/onedrako/react-native-pokedex-platzi Éxito en sus desarrollos

Reynaldo Francisco Moreno Briceño

student•

Hoy en dia no es necesario crear cada Navigation para cada screen, automaticamente al crear el screen en el archivo Navigation nos coloca el header con el nombre de la pantalla.

Solo necesitamos crear el PokedexNavigation para manejar distintas pantallas que se relacionen con el mismo componente.

Leibniz Moreno

student•

En la version 6 el Header del encabezado ya viene por defecto, para poder quitarlo hay que agregar en options headerShown: false en el Navigation.js

Gustavo Pú

student•

par los que no les reconoce el createStackNavigator hay que instalar esto.

yarn add @react-navigation/stack

Gera Garcia

student•

Actualicen para la v6.x que hay varios cambios y da problemas generar stack navigation con nuevos componentes

Francisco Espinel

student•

cuando agrego la navegación me sale este mensaje Found screens with the same name nested inside one another. Check:

Account, Account > Account

Que debo hacer ?

José Fabián Beltrán Meza

student•

Te esta diciendo que tienes screens con el mismo nombre anidados dentro de otro.

Daniel Soto Erices

student•

al ingresar

rnf + tab

ya no me entrega la función automática. Alguien sabría como volver a activarla ?????

JOSE CATAGUA

student•

Yo teneia el mismo inconveniente pero lo solucione agregando otra extension de react parecida a la que dijo que instalemos al principio del curso anterior a este ES7+ React/Redux/React-Native snippets

Julio Santacruz

student•

no estoy seguro si mas adelantes utilizaremos el stack navigation.. la version mas reciente me permite personalizar el header con el parametro 'header title'

<Tab.Navigator > <Tab.Screen name="Favorite" component={Favorite} options={{ headerTitle:'Favoritos', tabBarLabel: "Favoritos", tabBarIcon: ({ color, size }) => ( <Icon name="heart" color={color} size={size} /> ), }} /> <Tab.Screen name="Pokedex" component={Pokedex} options={{ tabBarLabel: "", tabBarIcon: () => PokeIcon(), }} /> <Tab.Screen name="Account" component={Account} options={{ tabBarLabel: "Mi Perfil", tabBarIcon: ({ color, size }) => ( <Icon name="user" color={color} size={size} /> ), }} /> </Tab.Navigator>

Julio Santacruz

student•

No se si mas adelante vamos a utilizar el stack navigation, pero con una version mas reciente podemos resolver la personalizacion del header con 'headerTitle' desde el componente Tab.Navigation


<Tab.Navigator  >
      <Tab.Screen
        name="Favorite"

        component={Favorite}
        options={{
          headerTitle:'Favoritos',
          tabBarLabel: "Favoritos",
          tabBarIcon: ({ color, size }) => (
            <Icon name="heart" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Pokedex"
        component={Pokedex}
        options={{
          tabBarLabel: "",
          headerTitle:'Pokedex',

          tabBarIcon: () => PokeIcon(),
        }}
      />
      <Tab.Screen
        name="Account"
        component={Account}
        options={{
          tabBarLabel: "Mi Perfil",
          headerTitle:'Mi Perfil',

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

David Rangel

student•

Para junio de 2025, con la versión actual de React Native ya no hace falta crear un Stack Navigator, basta con configurar el archivo _layout.tsx (en mi caso por ser Typesript), dentro de la carpeta (tabs), así:

import { FontAwesome } from '@expo/vector-icons';
import { Tabs } from 'expo-router';
import { Image } from 'react-native';

const pokeImage: string = '../../assets/images/pokeball.png';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name='index'
        // estas options quitan a index del tab navigator
        options={{
          href: null,
        }}
        // estas options quitan a index del tab navigator y ayuda a redireccionar
        redirect={true}
      />

      <Tabs.Screen
        name='favourites'
        options={{
          title: 'Favourites',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name='heart' color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name='pokedex'
        options={{
          title: '',
          tabBarIcon: () => RenderImage(),
        }}
      />
      <Tabs.Screen
        name='account'
        options={{
          title: 'Account',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name='user' color={color} size={size} />
          ),
        }}
      />
    </Tabs>
  );
}

const RenderImage = () => {
  return (
    // require solo acepta rutas estáticas
    <Image
      source={require(pokeImage)}
      style={{ width: 65, height: 67, top: -21 }}
    />
  );
};