// app/(tabs)/feed/_layout.tsx
import { Stack } from 'expo-router';
export default function FeedStackLayout() {
return (
<Stack screenOptions={{ headerShown: true }}>
<Stack.Screen
name="index"
options={{ title: 'Noutăți' }}
/>
<Stack.Screen
name="[id]"
options={{
title: 'Detalii Produs',
headerBackTitle: 'Înapoi',
}}
/>
</Stack>
);
}Am migrat recent o aplicație de e-commerce cu peste 30.000 de utilizatori activi lunari de la clasicul React Navigation 6 la Expo Router v3. Dacă ai un proiect existent cu zeci de ecrane legate strâns de un state global, refactoring-ul pe navigare nu e chiar o plimbare în parc. Iată concluziile mele sincere și soluția practică pentru structura clasică de Tab + Stack nested.
Când are sens să faci migrarea?
Dacă pornești un proiect nou în 2024, alegerea e simplă: folosește Expo Router. Sistemul de file-based routing (similar cu ce avem în Next.js) elimină tot boilerplate-ul unde declarai manual Stack.Navigator și zeci de componente Stack.Screen. Câștigi rute tipizate automat și deep linking out-of-the-box fără să-ți prinzi urechile în fișiere complexe de configurare.
În schimb, dacă ai o aplicație matură, scrisă pe React Navigation, unde ai deja middleware-uri custom, listeneri pe starea de navigare și regex-uri dubioase pentru URL-uri de deep link, mai așteaptă. La aplicația de care ziceam, am pierdut aproape 3 zile doar încercând să replic un flow de checkout unde unmount-ul automat din Expo Router îmi curăța starea unui formular mai devreme decât aveam nevoie.
Cum configurezi corect Tab + Stack nested
Cea mai frecventă problemă pe forumuri când vine vorba de Expo Router e: "Cum pun un Stack în interiorul unui Tab, dar ascund bara de tab-uri când intru pe ecranul de detalii?".
Să luăm un scenariu concret: ai un tab de Feed și un tab de Profil. Când dai tap pe un produs din Feed, vrei să mergi pe ecranul de Detalii, dar nu vrei ca bara de tab-uri să rămână vizibilă jos pe acel ecran.
Trucul stă în modul în care organizezi directoarele folosind parantezele rotunde (care creează grupuri fără să afecteze URL-ul) și directoarele dedicate pentru stack-uri interne:
app/
├── (tabs)/
│ ├── _layout.tsx <-- Aici declari Tabs
│ ├── feed/
│ │ ├── _layout.tsx <-- Aici declari Stack-ul pentru Feed
│ │ ├── index.tsx <-- Ecranul principal de Feed
│ │ └── [id].tsx <-- Ecranul de Detalii produs
│ └── profile.tsx <-- Tab-ul simplu de Profil
└── _layout.tsx <-- Root Stack
Prin separarea folderului feed cu propriul lui _layout.tsx, izolezi stiva de ecrane. Ecranul [id].tsx va fi împins (pushed) peste stack-ul local, dar fiind în interiorul tab-ului, rămâne organizat curat.
Compromisul de care nu-ți spune nimeni
Expo Router folosește tot React Navigation sub capotă, dar adaugă un strat de abstracție. Am economisit cam 25% din timpul de dezvoltare pe ecrane noi pentru că nu mai trebuia să editez 3 fișiere separate pentru o simplă rută.
Trade-off-ul? Pierzi un pic din controlul granular. De exemplu, dacă vrei ca la al doilea tap pe iconița de Tab să resetezi stack-ul exact la prima pagină și să faci scroll to top, în React Navigation aveai un listener simplu pe tabPress. În Expo Router, trebuie să imbrici hooks din librăria de bază (useNavigation) cu chestii specifice din expo-router ca să obții același comportament.
Expo Router este în mod clar direcția în care merge ecosistemul React Native. Totuși, dacă aplicația ta actuală funcționează brici pe React Navigation și nu ai nevoie urgentă de deep linking avansat, nu grăbi migrarea doar de dragul trendului.
Voi ce folosiți pe proiectele curente? Ați făcut deja tranziția la Expo Router sau preferați controlul manual?