Stacks de navegación

He aquí la importancia de saber Inglés y tener comprehensión; la documentación dice que la versión 5 para atrás ya no es mantenida. Lo que da cabida a muchos errores de compatibilidad.
Para evitar horas de debuggeo yo simplemente usé la versión recomendada por la misma documentación y todo funciona correctamente.

Antes de que continues esta clase. Instala la versión 6.x de React Navigation. Ahorrate dolores de cabeza.

Para los que están en la versión 6 de react-navigation, así quedaría el componente NavigationStack.js

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/HomeScreen";
import Settings from "../screens/SettingsScreen";

const Stack = createNativeStackNavigator();

export default function NavigationStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Les recomiendo fuertemente seguir la documentación. El curso necesita una actualización en esta parte.

Me parece mejorcito extraer enseguida el props así, en vez de colocar (props)

export default function HomeScreen({navigation}) {

    const { navigate } = navigation;

    const goToSettings = () => {
        navigate("Settings")
    }

Yo agregaría para ir a una pantalla anterior como

navigation.goBack();

• Shortcut para crear un componente rápidamente:

rnf 

Para los que hayan tenido el problema con @babel/plugin-proposal-export-namespace-from
Tuve que parar obviamente el server, ingresar el comando:
yarn add react-native-reanimated

Luego ir al babel.config.js y colorar sobre el final:
module.exports = {
presets: [‘module:metro-react-native-babel-preset’],
plugins: [
‘react-native-reanimated/plugin’,
],
};

Por último el comando yarn cache clean (muy importante) e iniciar el server normlamente.
Espero que les sirva!

Lee la documentación!

Cuando les muestre error de importación de CreateStackNavigator

Para seguirle el ritmo pongan el video en 0.85x por que va a mil por hora 😂

Para hacer un código más elegante y ahorrar líneas pueden realizar la desestructuración de la siguiente manera

export default function SettingsScreen( { navigation } ) {}

😎 Les dejo mis notas de esta clase Notion

para los que lo hagan con la version 5 y no les funcione por un error tiene que agregar esta linea en el archivo de babel

plugins: [‘react-native-reanimated/plugin’],

saludos

Ahora createStackNavigator() combió por esto:

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

Mirenlo aquí

Para los que vamos en el año 2023, con RN CLI y typescript, pueden utilizar useNavigation para provocar la navegación, de lo contrario están completamente ligados a enviarlo por props y en typescript es mas complicado el manejo de las mismas.

const navigation = useNavigation<ProfileScreenNavigationProp>();

TIPADO CON TYPESCRIPT
Si están usando typescript y quieren tipar los props:
Crean un archivo llamado types.d.ts dentro de la carpeta navigation y colocan:

import type { CompositeScreenProps, NavigatorScreenParams} from '@react-navigation/native';
import type { StackScreenProps } from '@react-navigation/stack';
import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
  
export type RootStackParamList = {
    Home: NavigatorScreenParams<HomeTabParamList>;
    Settings: undefined;
};
  
export type RootStackScreenProps<T extends keyof RootStackParamList> = StackScreenProps<RootStackParamList, T>;

  
declare global {
    namespace ReactNavigation {
        interface RootParamList extends RootStackParamList {}
    }
}

Ese código lo obtuve de la documentación pero lo adapté al ejemplo del profesor.
Y ahora dentro de HomeScreen.ts

import { View, Text, Button } from "react-native";
import type { StackScreenProps } from "@react-navigation/stack";
import { RootStackParamList } from "../navigation/types";


export function HomeScreen({navigation}: StackScreenProps<RootStackParamList, "Home">): JSX.Element {
    const goToSettings = () => {
        navigation.navigate("Home");
    }

    return (
        <View>
            <Text>This is homeScreen</Text>
            <Text>This is homeScreen</Text>
            <Text>This is homeScreen</Text>
            <Text>This is homeScreen</Text>
            <Button onPress={goToSettings} title="Go to settings"/>
        </View>   
    )
}

Excelente curso!! 😎