Instalación y Configuración de React Native Navigation

En esta clase, aprenderemos a instalar y configurar la navegación utilizando React Native Navigation. A continuación, explicamos paso a paso cómo hacerlo.

Paso 1: Instalación de la librería

Primero, accedemos a Google y buscamos React Native Navigation. Seleccionamos la primera opción, que corresponde a la librería oficial.

Instrucciones de instalación

1. Hacemos clic en Leer Documentación.
2. Nos proporciona el comando necesario para instalar la librería. Copiamos este comando y lo ejecutamos en nuestra terminal.
3. La instalación de React Native Navigation requiere la adición de algunas dependencias adicionales para un funcionamiento adecuado. Instalaremos las siguientes librerías:
   • react-native
   • react
   • react-navigation-native
   • react-native-screens
   • react-native-safe-area-context

Paso 2: Configuración inicial

Una vez instaladas las librerías necesarias, seguimos la documentación oficial. Nos sugiere crear un archivo en la carpeta Core. Para ello:

1. Creamos una nueva carpeta llamada Navigation.
2. Dentro de esta carpeta, creamos un archivo index.tsx y copiamos el código inicial proporcionado en la documentación.

Paso 3: Configuración del stack de autenticación

Con el código básico listo, ahora configuramos el stack de autenticación. En este caso, creamos una función llamada OutStack, que no recibe parámetros pero sí retorna un contenedor de navegación. Este contenedor será el que renderice las diferentes pantallas de la aplicación.

Ejemplo de código para el stack de autenticación:

function OutStack() {
  return (
    <Navigator>
      <Screen name="Login" component={LoginScreen} />
      <Screen name="Register" component={RegisterScreen} />
    </Navigator>
  );
}

Paso 4: Configuración del stack principal

A continuación, configuramos el stack principal con la navegación inferior, que mostrará las pantallas de «Home» y «Profile». Para ello, utilizamos CreateBottomTabNavigator:

function MainApp() {
  return (
    <TabNavigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </TabNavigator>
  );
}

Paso 5: Integración de los stacks en la navegación principal

Una vez configurados ambos stacks, el de autenticación y el principal, los integramos en la navegación principal de la aplicación. Esto se logra utilizando un Stack.Navigator que contiene dos Stack.Screen, uno para cada stack.

function NavigationApp() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Authentication" component={OutStack} />
      <Stack.Screen name="MainApp" component={MainApp} />
    </Stack.Navigator>
  );
}

Paso 6: Exportación y uso del componente de navegación

Después de configurar correctamente la navegación, es importante exportar el archivo index.tsx desde la carpeta Navigation. Para esto, utilizamos el patrón de barrel para exportar el componente NavigationApp de manera nombrada.

export { NavigationApp };

Ahora, podemos importar este componente en el archivo principal de la aplicación y utilizarlo.

import { NavigationApp } from './core/navigation';

Paso 7: Corrección de los encabezados y ajustes finales

Para mejorar la experiencia de usuario, podemos ocultar los encabezados de las pantallas de autenticación y registro. Esto se puede lograr utilizando la opción headerShown: false dentro de las configuraciones de cada pantalla.

<Stack.Screen 
  name="Login" 
  component={LoginScreen} 
  options={{ headerShown: false }} 
/>

Paso 8: Iniciar la aplicación

Finalmente, iniciamos la aplicación utilizando el comando npm start. Si todo está configurado correctamente, podremos ver las pantallas de Login y Register en el stack de autenticación y las pantallas de Home y Profile en el stack principal.

Conclusión

Con estos pasos, hemos configurado la navegación en nuestra aplicación utilizando React Native Navigation. En la próxima clase, abordaremos la implementación de rutas adicionales y solucionaremos los pequeños warnings que aparecen. También realizaremos un commit para guardar estos avances en nuestro repositorio de Git:

git add .
git commit -m "Implementación de navegación con React Navigation"

¡Eso es todo por esta clase! Nos vemos en la siguiente sesión.