Stack Navigator: ce este, navigarea pe stivă în React Native

Ce este Stack Navigator?

Stack Navigator — unul dintre navigatorii de bază ai bibliotecii React Navigation, care implementează modelul de stivă al ecranelor. Oferă o navigare familiară pentru utilizatorii de mobile: deschiderea unui ecran nou este însoțită de o animație de intrare din dreapta, iar butonul «Înapoi» sau gestul de glisare readuce utilizatorul la ecranul anterior. Stack Navigator este suportat pe iOS și Android, folosind componente native ale platformei pentru performanță maximă.

React Navigation este cea mai populară bibliotecă de navigare pentru React Native, instalată în 85% din proiecte (conform datelor npm, 2026). Stack Navigator face parte din nucleul său și este disponibil în două implementări: createNativeStackNavigator (nativă, recomandată) și createStackNavigator (JavaScript, pentru animații personalizate complexe). Versiunea nativă a apărut în React Navigation v5 și a devenit standard în v6+.

Principalul avantaj al Stack Navigator — comportament natural, familiar utilizatorilor iOS și Android. Pe iOS, stiva este reprezentată vizual prin UINavigationController, pe Android — prin FragmentManager cu animație slide. Dezvoltatorul nu trebuie să implementeze manual logica stivei — navigatorul gestionează stările ecranelor, back stack și animațiile automat.

Cum funcționează navigarea pe stivă

Navigarea pe stivă se bazează pe principiul LIFO (Last In, First Out). Când utilizatorul deschide un ecran nou, navigatorul îl plasează în vârful stivei. La apăsarea «Înapoi», ecranul de sus este eliminat, iar utilizatorul vede ecranul anterior. Stiva poate conține orice număr de ecrane — limitarea este doar memoria dispozitivului.

Fiecare ecran din stivă își păstrează starea. La revenirea la ecranul anterior, starea acestuia se restabilește automat. Aceasta deosebește stiva de alte tipuri de navigare (Tab, Drawer), unde ecranele pot fi recreate. React Navigation gestionează starea prin propriul mecanism de context de navigare.

Gestul de glisare pentru revenire

Pe iOS, Stack Navigator suportă gestul de glisare de la marginea stângă a ecranului pentru revenire — acesta este comportamentul standard iOS pe care utilizatorii îl așteaptă. Pe Android, gestul este dezactivat implicit, dar poate fi activat prin opțiunea gestureEnabled. În Native Stack, gestul funcționează nativ, fără întârzieri ale firului JavaScript.

Native Stack vs JS Stack

React Navigation oferă două tipuri de Stack Navigator: Native Stack (createNativeStackNavigator) și JS Stack (createStackNavigator). Diferența principală este locul de execuție al animației. Native Stack folosește driverele native de animație iOS și Android, în timp ce JS Stack funcționează prin firul JavaScript al React Native. Alegerea între ele depinde de cerințele de performanță și personalizare.

Native Stack este recomandat pentru majoritatea proiectelor. Asigură animații fluide de 60 FPS fără blocarea firului JS, suportă gestul sistem de glisare pe iOS și folosește tranziții native — slide pe iOS, fade pe Android. Cu toate acestea, Native Stack este limitat în personalizarea animațiilor: este disponibil doar un set predefinit de tranziții.

JS Stack oferă control complet asupra animațiilor prin cardStyleInterpolator. Dezvoltatorul poate crea orice animație: scalare, rotație, paralaxă, curbe personalizate. Dezavantaj — animațiile rulează în firul JS, ceea ce poate cauza căderi de cadre pe dispozitive slabe la tranziții complexe. Pentru 70% din proiecte, Native Stack este suficient.

// Native Stack — implementare recomandată
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>
  );
}

Instalarea și configurarea Stack Navigator

Pentru a începe lucrul cu Stack Navigator trebuie instalat React Navigation și dependențele sale. Setul minim include @react-navigation/native, @react-navigation/native-stack și react-native-screens. După instalare, aplicația este înfășurată în NavigationContainer — context care furnizează starea de navigare tuturor componentelor copil.

# Instalarea dependențelor React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Pentru iOS — instalarea pod
cd ios && pod install && cd ..

După instalare, se creează Stack.Navigator cu ecrane definite în RootStackParamList. Fiecare ecran este legat de o componentă React prin prop-ul component. Navigatorul poate fi rădăcină sau imbricat într-un alt navigator (Tab, Drawer). Pentru configurare se folosesc screenOptions — comune pentru toate ecranele sau individuale pentru fiecare.

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

Parametrii și personalizarea Stack Navigator

Stack Navigator oferă numeroase opțiuni pentru personalizarea aspectului și comportamentului. Parametrii principali se setează prin screenOptions la nivel de Navigator sau options la nivel de Screen. Dezvoltatorul poate configura titlul, animația de tranziție, gestul de glisare, stilul cardului și întunecarea fundalului. Flexibilitatea setărilor permite adaptarea navigării la sistemul de design al aplicației.

Animații personalizate prin cardStyleInterpolator

Pentru JS Stack, cardStyleInterpolator permite crearea de animații arbitrare de tranziție între ecrane. Este un instrument puternic pentru implementarea efectelor vizuale unice: scalare, rotație, paralaxă, flip orizontal. Funcția primește valorile curente de progres ale animației (current, next) și returnează stiluri pentru elementele animate.

Tipizarea navigării cu TypeScript

Stack Navigator suportă tipizarea completă prin TypeScript. Pentru aceasta se definește RootStackParamList — un tip-obiect în care cheile sunt numele ecranelor, iar valorile sunt tipurile de parametri. După tipizare, navigation.navigate și route.params primesc autocompletare și verificare de tip. Aceasta elimină erorile de transmitere a parametrilor în faza de compilare.

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

// Ecran tipizat
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

  return (
    <View>
      <Text>Produsul {id} — {category}</Text>
      <Button title="În coș"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Scenarii avansate: ferestre modale și grupuri

Stack Navigator suportă gruparea ecranelor și ferestrele modale. Grupurile (Screen Group) permit aplicarea de setări comune mai multor ecrane fără duplicare. Ferestrele modale se implementează prin stack presentation: 'modal' — ecranul se deschide de jos cu întunecarea fundalului, ca un modal sistemic pe iOS. Această opțiune este disponibilă doar în Native Stack.

Pentru navigarea complexă, Stack Navigator poate fi imbricat în Tab Navigator sau Drawer Navigator. De exemplu, fila «Acasă» conține propria stivă de ecrane, iar fila «Profil» — pe a sa. O astfel de compoziție de navigatori este abordarea standard pentru aplicațiile de producție. Fiecare stivă este izolată: back stack-ul din interiorul unei file nu afectează celelalte file.

// Stivă imbricată în 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>
  );
}

// Grupuri de ecrane cu opțiuni comune
<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>