expo-router

Place route files in the app directory, using square brackets for dynamic segments like [id].tsx and parentheses for group routes that don't affect URLs. Every directory can have a _layout.tsx file defining its Stack or tabs, and the app must always have a route matching "/".

Import NativeTabs from expo-router/unstable-native-tabs and define a NativeTabs.Trigger for each route, with Label, Icon, and Badge as child components. The trigger name must exactly match the route name including parentheses, and tabs must remain static since changes remount the navigator.

Prefer NativeTabs for the best iOS experience, including liquid glass effects on iOS 26 and Material 3 navigation on Android. JS Tabs use a props-based API with built-in headers, while NativeTabs use component children and require nesting a Stack inside each tab for headers.

No, Stack.Toolbar components for header and bottom toolbars are iOS only and require Expo SDK 55 or later. Placement options are left, right, and bottom, with bottom placement only usable inside screen components rather than layout files.

On iOS 18 and earlier, the tab bar turns transparent if the screen's first opaque child is not a ScrollView or FlatList. Either make the scroll view the first child, set collapsable={false} on wrapper views, or set disableTransparentOnScrollEdge on the trigger.

No, in SDK 56 and later you should import from expo-router/react-navigation instead of @react-navigation/native, /core, /elements, or /routers. This covers ThemeProvider, DarkTheme, and DefaultTheme used for wrapping layouts.