Stack Navigator: cos'è, navigazione a pila in React Native

Cos'è Stack Navigator?

Stack Navigator — uno dei navigatori di base della libreria React Navigation che implementa il modello a pila di schermi. Fornisce la navigazione familiare agli utenti mobili: l'apertura di un nuovo schermo è accompagnata da un'animazione di scorrimento verso destra e il pulsante «Indietro» o il gesto di scorrimento riporta l'utente allo schermo precedente. Stack Navigator supporta iOS e Android, utilizzando componenti nativi della piattaforma per le massime prestazioni.

React Navigation è la libreria di navigazione più popolare per React Native, installata nell'85% dei progetti (secondo i dati npm, 2026). Stack Navigator fa parte del suo nucleo ed è disponibile in due implementazioni: createNativeStackNavigator (nativa, consigliata) e createStackNavigator (JavaScript, per animazioni personalizzate complesse). La versione nativa è apparsa in React Navigation v5 ed è diventata lo standard in v6+.

Il vantaggio principale di Stack Navigator — il comportamento naturale familiare agli utenti di iOS e Android. Su iOS, la pila è rappresentata visivamente da UINavigationController, su Android — da FragmentManager con animazione di scorrimento. Lo sviluppatore non deve implementare manualmente la logica della pila — il navigatore gestisce automaticamente gli stati degli schermi, la pila di ritorno e le animazioni.

Come funziona la navigazione a pila

La navigazione a pila si basa sul principio LIFO (Last In, First Out). Quando un utente apre un nuovo schermo, il navigatore lo posiziona in cima alla pila. Premendo «Indietro», lo schermo superiore viene rimosso e l'utente vede quello precedente. La pila può contenere un numero qualsiasi di schermi — l'unico limite è la memoria del dispositivo.

Ogni schermo nella pila conserva il suo stato. Tornando a uno schermo precedente, il suo stato viene ripristinato automaticamente. Questo distingue la pila da altri tipi di navigazione (Tab, Drawer), dove gli schermi possono essere ricreati. React Navigation gestisce lo stato attraverso il proprio meccanismo di contesto di navigazione.

Gesto di scorrimento per tornare indietro

Su iOS, Stack Navigator supporta un gesto di scorrimento dal bordo sinistro per tornare indietro — questo è il comportamento standard di iOS che gli utenti si aspettano. Su Android, il gesto è disattivato per impostazione predefinita, ma può essere attivato tramite l'opzione gestureEnabled. In Native Stack, il gesto funziona nativamente senza ritardi del thread JavaScript.

Native Stack vs JS Stack

React Navigation offre due tipi di Stack Navigator: Native Stack (createNativeStackNavigator) e JS Stack (createStackNavigator). La differenza principale — dove viene eseguita l'animazione. Native Stack utilizza i driver di animazione nativi di iOS e Android, mentre JS Stack funziona attraverso il thread JavaScript di React Native. La scelta tra di essi dipende dai requisiti di prestazioni e personalizzazione.

Native Stack è consigliato per la maggior parte dei progetti. Fornisce animazioni fluide a 60 FPS senza bloccare il thread JS, supporta il gesto di scorrimento indietro di sistema su iOS e utilizza transizioni native — slide su iOS, fade su Android. Tuttavia, Native Stack è limitato nella personalizzazione delle animazioni: solo un insieme predefinito di transizioni è disponibile.

JS Stack dà il controllo completo sulle animazioni tramite cardStyleInterpolator. Lo sviluppatore può creare qualsiasi animazione: ridimensionamento, rotazione, parallasse, curve personalizzate. Lo svantaggio — le animazioni vengono eseguite nel thread JS, il che può causare cadute di fotogrammi su dispositivi deboli con transizioni complesse. Per il 70% dei progetti, Native Stack è più che sufficiente.

// Native Stack — implementazione consigliata
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>
  );
}

Installazione e configurazione di Stack Navigator

Per iniziare con Stack Navigator, è necessario installare React Navigation e le sue dipendenze. L'insieme minimo include @react-navigation/native, @react-navigation/native-stack e react-native-screens. Dopo l'installazione, l'applicazione viene racchiusa in NavigationContainer — un contesto che fornisce lo stato di navigazione a tutti i componenti figli.

# Installazione delle dipendenze di React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Per iOS — installazione pod
cd ios && pod install && cd ..

Dopo l'installazione, viene creato Stack.Navigator con schermi specifici definiti in RootStackParamList. Ogni schermo è collegato a un componente React tramite la prop component. Il navigatore può essere radice o annidato all'interno di un altro navigatore (Tab, Drawer). Per la configurazione, si utilizzano screenOptions — comuni per tutti gli schermi o individuali per ciascuno.

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: 'Home' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Parametri e personalizzazione di Stack Navigator

Stack Navigator fornisce molte opzioni per personalizzare l'aspetto e il comportamento. I parametri principali vengono impostati tramite screenOptions a livello di Navigator o options a livello di Screen. Lo sviluppatore può configurare l'intestazione, l'animazione di transizione, il gesto di scorrimento, lo stile della scheda e l'oscuramento dello sfondo. La flessibilità delle impostazioni consente di adattare la navigazione al sistema di design dell'applicazione.

Animazioni personalizzate tramite cardStyleInterpolator

Per JS Stack, cardStyleInterpolator consente di creare animazioni di transizione arbitrarie tra gli schermi. È uno strumento potente per implementare effetti visivi unici: ridimensionamento, rotazione, parallasse, capovolgimento orizzontale. La funzione riceve i valori di avanzamento dell'animazione correnti (current, next) e restituisce stili per gli elementi animati.

Tipizzazione della navigazione con TypeScript

Stack Navigator supporta la tipizzazione completa tramite TypeScript. Per fare ciò, si definisce RootStackParamList — un tipo oggetto in cui le chiavi sono i nomi degli schermi e i valori sono i tipi dei parametri. Dopo la tipizzazione, navigation.navigate e route.params ottengono l'autocompletamento e il controllo dei tipi. Ciò elimina gli errori di passaggio dei parametri in fase di compilazione.

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

// Schermo tipizzato
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

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

Scenari avanzati: finestre modali e gruppi

Stack Navigator supporta il raggruppamento di schermi e finestre modali. I gruppi (Screen Group) consentono di applicare impostazioni comuni a più schermi senza duplicazione. Le finestre modali sono implementate tramite stack presentation: 'modal' — lo schermo si apre dal basso con oscuramento dello sfondo, come un modale di sistema su iOS. Questa opzione è disponibile solo in Native Stack.

Per la navigazione complessa, Stack Navigator può essere annidato all'interno di un Tab Navigator o Drawer Navigator. Ad esempio, la scheda «Home» ha la propria pila di schermi e la scheda «Profilo» ha la propria. Questa composizione di navigatori è l'approccio standard per le applicazioni di produzione. Ogni pila è isolata: la pila di ritorno all'interno di una scheda non influisce sulle altre schede.

// Pila annidata in 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>
  );
}

// Gruppi di schermi con opzioni condivise
<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>