Stack Navigator: qué es, navegación por pila en React Native

¿Qué es Stack Navigator?

Stack Navigator es uno de los navegadores básicos de la librería React Navigation que implementa el modelo de pila de pantallas. Proporciona la navegación familiar para los usuarios de móviles: abrir una nueva pantalla se acompaña de una animación de deslizamiento hacia la derecha, y el botón «Atrás» o el gesto de deslizar devuelve a la pantalla anterior. Stack Navigator es compatible con iOS y Android, utilizando componentes nativos de la plataforma para un máximo rendimiento.

React Navigation es la librería de navegación más popular para React Native, instalada en el 85 % de los proyectos (según datos de npm, 2026). Stack Navigator forma parte de su núcleo y está disponible en dos implementaciones: createNativeStackNavigator (nativa, recomendada) y createStackNavigator (JavaScript, para animaciones personalizadas complejas). La versión nativa apareció en React Navigation v5 y se convirtió en el estándar en v6+.

La principal ventaja de Stack Navigator es el comportamiento natural que conocen los usuarios de iOS y Android. En iOS, la pila se representa visualmente con UINavigationController, en Android — con FragmentManager y animación de deslizamiento. El desarrollador no necesita implementar la lógica de pila manualmente — el navegador gestiona los estados de las pantallas, la pila de retroceso y las animaciones automáticamente.

Cómo funciona la navegación por pila

La navegación por pila se basa en el principio LIFO (Last In, First Out). Cuando un usuario abre una nueva pantalla, el navegador la coloca en la cima de la pila. Al presionar «Atrás», la pantalla superior se elimina y el usuario ve la anterior. La pila puede contener cualquier número de pantallas — el único límite es la memoria del dispositivo.

Cada pantalla en la pila conserva su estado. Al volver a una pantalla anterior, su estado se restaura automáticamente. Esto diferencia la pila de otros tipos de navegación (Tab, Drawer), donde las pantallas pueden recrearse. React Navigation gestiona el estado mediante su propio mecanismo de contexto de navegación.

Gesto de deslizamiento para retroceder

En iOS, Stack Navigator admite un gesto de deslizar desde el borde izquierdo para retroceder — este es el comportamiento estándar de iOS que los usuarios esperan. En Android, el gesto está desactivado por defecto, pero se puede activar mediante la opción gestureEnabled. En Native Stack, el gesto funciona de forma nativa sin retrasos del hilo de JavaScript.

Native Stack vs JS Stack

React Navigation ofrece dos tipos de Stack Navigator: Native Stack (createNativeStackNavigator) y JS Stack (createStackNavigator). La principal diferencia es dónde se ejecuta la animación. Native Stack utiliza los controladores de animación nativos de iOS y Android, mientras que JS Stack funciona a través del hilo de JavaScript de React Native. La elección entre ellos depende de los requisitos de rendimiento y personalización.

Native Stack está recomendado para la mayoría de los proyectos. Proporciona animaciones fluidas a 60 FPS sin bloquear el hilo JS, admite el gesto de retroceso del sistema en iOS y utiliza transiciones nativas — slide en iOS, fade en Android. Sin embargo, Native Stack tiene limitaciones en la personalización de animaciones: solo está disponible un conjunto predefinido de transiciones.

JS Stack ofrece control total sobre las animaciones mediante cardStyleInterpolator. El desarrollador puede crear cualquier animación: escalado, rotación, paralaje, curvas personalizadas. La desventaja es que las animaciones se ejecutan en el hilo JS, lo que puede causar caídas de fotogramas en dispositivos débiles con transiciones complejas. Para el 70 % de los proyectos, Native Stack es más que suficiente.

// Native Stack — implementación recomendada
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Instalación y configuración de Stack Navigator

Para empezar con Stack Navigator, es necesario instalar React Navigation y sus dependencias. El conjunto mínimo incluye @react-navigation/native, @react-navigation/native-stack y react-native-screens. Tras la instalación, la aplicación se envuelve en NavigationContainer — un contexto que proporciona el estado de navegación a todos los componentes hijos.

# Instalación de dependencias de React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Para iOS — instalación de pod
cd ios && pod install && cd ..

Después de la instalación, se crea Stack.Navigator con pantallas específicas definidas en RootStackParamList. Cada pantalla se vincula a un componente de React mediante la prop component. El navegador puede ser raíz o estar anidado dentro de otro navegador (Tab, Drawer). Para la configuración se utilizan screenOptions — comunes para todas las pantallas o individuales para cada una.

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

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'Inicio' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Parámetros y personalización de Stack Navigator

Stack Navigator proporciona muchas opciones para personalizar la apariencia y el comportamiento. Los parámetros principales se definen mediante screenOptions a nivel de Navigator u options a nivel de Screen. El desarrollador puede configurar el encabezado, la animación de transición, el gesto de deslizamiento, el estilo de la tarjeta y el oscurecimiento del fondo. La flexibilidad de la configuración permite adaptar la navegación al sistema de diseño de la aplicación.

Animaciones personalizadas mediante cardStyleInterpolator

Para JS Stack, cardStyleInterpolator permite crear animaciones de transición arbitrarias entre pantallas. Es una herramienta potente para implementar efectos visuales únicos: escalado, rotación, paralaje, giro horizontal. La función recibe los valores actuales del progreso de la animación (current, next) y devuelve estilos para los elementos que se están animando.

Tipado de navegación con TypeScript

Stack Navigator admite el tipado completo mediante TypeScript. Para ello, se define RootStackParamList — un tipo objeto donde las claves son los nombres de las pantallas y los valores son los tipos de parámetros. Después del tipado, navigation.navigate y route.params obtienen autocompletado y verificación de tipos. Esto elimina los errores de paso de parámetros en tiempo de compilación.

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// Pantalla tipada
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>Producto {id} — {category}</Text>
      <Button title="Agregar al carrito"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Escenarios avanzados: ventanas modales y grupos

Stack Navigator admite la agrupación de pantallas y ventanas modales. Los grupos (Screen Group) permiten aplicar configuraciones comunes a varias pantallas sin duplicación. Las ventanas modales se implementan mediante stack presentation: 'modal' — la pantalla se abre desde abajo con oscurecimiento del fondo, como un modal del sistema en iOS. Esta opción solo está disponible en Native Stack.

Para navegación compleja, Stack Navigator puede anidarse dentro de un Tab Navigator o Drawer Navigator. Por ejemplo, la pestaña «Inicio» tiene su propia pila de pantallas, y la pestaña «Perfil» tiene la suya. Esta composición de navegadores es el enfoque estándar para aplicaciones de producción. Cada pila está aislada: la pila de retroceso dentro de una pestaña no afecta a otras pestañas.

// Pila anidada en Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// Grupos de pantallas con opciones compartidas
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>