Implementando y Entendiendo Stack Navigation en React Native: Un Ejemplo Paso a Paso

En este blog, aprenderás cómo usar Stack Navigation en React Native de manera efectiva. Vamos a desglosar un ejemplo completo que incluye navegación entre pantallas, uso de un botón personalizado, y una configuración robusta para gestionar rutas en tu aplicación.

¿Qué es Stack Navigation?

Stack Navigation organiza las pantallas de tu aplicación en una pila (o stack). Cada pantalla nueva se apila sobre la anterior, permitiendo navegar hacia adelante y atrás con facilidad. Este patrón es común en aplicaciones móviles modernas, donde los usuarios navegan entre pantallas con encabezados y transiciones suaves.

Con React Navigation, puedes configurar fácilmente Stack Navigation en tu aplicación React Native.

Configuración Inicial del Proyecto

Antes de comenzar con el código, asegúrate de haber instalado las dependencias necesarias:

npm install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-screens react-native-safe-area-context react-native-masked-view react-native-paper

Estructura del Proyecto

Organizar tu proyecto es clave para mantener un código limpio y escalable. La estructura de nuestro ejemplo será la siguiente:

src/
├── presentation/
│   ├── components/
│   │   └── shared/
│   │       └── PrimaryButton.tsx  # Botón personalizado
│   ├── routes/
│   │   └── StackNavigator.tsx     # Configuración de navegación
│   ├── screens/
│   │   ├── home/
│   │   │   └── HomeScreen.tsx     # Pantalla principal
│   │   ├── products/
│   │   │   └── ProductsScreen.tsx # Pantalla de productos
│   │   └── settings/
│   │       └── SettingsScreen.tsx # Pantalla de configuración
├── App.tsx

1. Creando un Botón Personalizado: PrimaryButton

Comencemos con el botón reutilizable. Este componente nos permitirá navegar entre las pantallas:

// src/presentation/components/shared/PrimaryButton.tsx
import React from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';

interface Props {
  text: string;
  onPress: () => void;
}

export const PrimaryButton = ({ onPress, text }: Props) => {
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.textButton}>{text}</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'purple',
    margin: 16,
    padding: 16,
    borderRadius: 4,
  },
  textButton: {
    color: 'white',
    fontWeight: 'bold',
  },
});

Explicación de Props

  • text: El texto que aparecerá en el botón.
  • onPress: Una función que se ejecuta cuando el botón es presionado.

Diseño del Botón

  • backgroundColor: 'purple': Da un color púrpura al botón.
  • padding: 16: Aumenta el área de clic del botón.
  • borderRadius: 4: Redondea las esquinas del botón.

2. Configurando Stack Navigation

Crea el archivo de configuración de navegación donde se definen las rutas y pantallas:

// src/presentation/routes/StackNavigator.tsx
import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen } from '../screens/home/HomeScreen';
import { ProductsScreen } from '../screens/products/ProductsScreen';
import { SettingsScreen } from '../screens/settings/SettingsScreen';

const Stack = createStackNavigator();

export const StackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: true,
        headerStyle: {
          elevation: 0,
          shadowColor: 'transparent',
        },
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Products" component={ProductsScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
};

Propiedades Importantes

  • screenOptions: Configura las opciones generales de las pantallas.

    • headerShown: Si es true, muestra un encabezado en cada pantalla.
    • headerStyle: Personaliza el estilo del encabezado.
      • elevation: 0: Elimina la sombra en Android.
      • shadowColor: 'transparent': Elimina la sombra en iOS.

  • Stack.Screen: Define cada pantalla en la pila.

    • name: Identificador único de la pantalla.
    • component: El componente que se renderiza en esa pantalla.

3. Creando la Pantalla Principal: HomeScreen

Ahora, define la pantalla inicial que mostrará los botones para navegar:

// src/presentation/screens/home/HomeScreen.tsx
import React from 'react';
import { PrimaryButton } from '../../components/shared/PrimaryButton';
import { View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export const HomeScreen = () => {
  const navigation = useNavigation();
  
  return (
    <View>
      <PrimaryButton
        onPress={() => navigation.navigate('Products' as never)}
        text="Productos"
      />
      <PrimaryButton
        onPress={() => navigation.navigate('Settings' as never)}
        text="Settings"
      />
    </View>
  );
};

Uso de useNavigation

  • useNavigation: Un hook que permite acceder al objeto de navegación dentro del componente.
    • navigate('Products'): Navega a la pantalla Products.
    • navigate('Settings'): Navega a la pantalla Settings.

4. Integrando Stack Navigator en App.tsx

Finalmente, integra la navegación en tu archivo principal:

// App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { StackNavigator } from './presentation/routes/StackNavigator';

export const App = () => {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
};
  • NavigationContainer: Envuelve toda tu navegación. Es obligatorio para usar cualquier tipo de navegación en React Navigation.

5. Otras Pantallas

Define las pantallas adicionales (ProductsScreen y SettingsScreen) según tu diseño:

// src/presentation/screens/products/ProductsScreen.tsx
import React from 'react';
import { View, Text } from 'react-native';

export const ProductsScreen = () => {
  return (
    <View>
      <Text>Pantalla de Productos</Text>
    </View>
  );
};

// src/presentation/screens/settings/SettingsScreen.tsx
import React from 'react';
import { View, Text } from 'react-native';

export const SettingsScreen = () => {
  return (
    <View>
      <Text>Pantalla de Configuración</Text>
    </View>
  );
};

Resultado

Cuando ejecutes tu aplicación, deberías:

  1. Ver la pantalla Home con dos botones: “Productos” y “Settings”.
  2. Al presionar un botón, navegarás a la pantalla correspondiente.
  3. Podrás regresar a la pantalla anterior gracias al encabezado de navegación predeterminado.

Conclusión

Este ejemplo demuestra cómo usar Stack Navigation en React Native para crear una navegación básica pero efectiva. Usar componentes reutilizables como PrimaryButton mejora la legibilidad y mantenimiento del código. Además, configurar correctamente las rutas y opciones de pantalla asegura una experiencia de usuario fluida y personalizable.