// app/(app)/_layout.tsx
import { Stack } from 'expo-router';
export default function AppLayout() {
return (
<Stack screenOptions={{ headerShown: false }}>
{/* Grupul de tab-uri ca ecran principal */}
<Stack.Screen name="(tabs)" />
{/* Ecranul de detalii care se deschide peste tab-uri */}
<Stack.Screen
name="details/[id]"
options={{
headerShown: true,
title: 'Detalii Produs',
presentation: 'card',
headerBackTitle: 'Înapoi'
}}
/>
</Stack>
);
}Am tot văzut discuții aprinse pe tema asta în ultima vreme. După ce am migrat un proiect destul de măricel (pe la vreo 12k utilizatori activi lunar) de la React Navigation clasic la Expo Router, am zis că merită să trag o linie. Merită efortul sau e doar hype? Spoiler: am economisit cam 30% din boilerplate-ul de navigație, dar drumul n-a fost lipsit de obstacole.
Când merită să faci pasul?
Dacă ai deja o aplicație imensă, cu zeci sau sute de ecrane scrise în React Navigation 6 și totul merge brici, nu te atinge de ea. Nu aduce valoare de business imediată și o să pierzi zile bune testând edge case-uri de deep linking.
În schimb, dacă pornești un proiect nou sau dacă cel actual are o structură de navigație care a devenit de neînțeles (spaghetti de Navigator și Screen nestuite manual), Expo Router e aur curat. File-based routing-ul te obligă la o disciplină pe care altfel o pierzi pe drum. Primești deep linking nativ, rute tipizate automat și o structură care seamănă mult cu Next.js.
Trade-off-ul de care nu-ți spune nimeni
Câștigi viteză de dezvoltare, dar pierzi controlul granular. React Navigation îți permitea să faci absolut orice nebunie dinamică în funcție de state-ul global.
În Expo Router, pentru că totul se bazează pe structura de foldere, unele scenarii devin rigide. De exemplu, dacă ai animații foarte custom la tranziții sau dacă vrei să randezi ecrane condiționat în funcție de niște permisiuni ciudate luate dintr-un API legacy la startup, o să te cam chinui cu layout-urile.
Cum configurezi Tab + Stack nested (fără să o iei razna)
Cea mai mare confuzie pe care o văd la juniori e cum legi un tab bar de ecrane de detalii (stack-uri) fără să dublezi layout-ul sau să lași tab-urile vizibile pe ecranele de detaliu.
În React Navigation scriai cod declarativ până te plictiseai. În Expo Router, totul stă în cum organizezi folderele. Trucul este să nu pui ecranul de detalii în interiorul folderului de (tabs). Dacă îl pui acolo, tab-ul de jos va rămâne vizibil când navighezi pe ecranul de detalii.
Iată structura corectă de foldere:
app/
├── (app)/
│ ├── (tabs)/
│ │ ├── _layout.tsx
│ │ ├── index.tsx (Home)
│ │ └── profile.tsx (Profil)
│ ├── _layout.tsx (Stack-ul principal)
│ └── details/
│ └── [id].tsx (Ecranul de detalii, în afara tab-urilor)
└── _layout.tsx (Root Layout - Providers, Auth state)
Prin această structură, stack-ul principal din (app)/_layout.tsx controlează tranzitia către ecranul de detalii. Când utilizatorul navighează la /details/123, ecranul de detalii se va deschide peste întregul ecran, ascunzând elegant tab bar-ul din dedesubt.
Voi ce folosiți la proiectele noi? Ați rămas pe clasicul React Navigation sau ați trecut complet la file-based?