1---
2title: Use Native Navigators for Navigation
3impact: HIGH
4impactDescription: native performance, platform-appropriate UI
5tags: navigation, react-navigation, expo-router, native-stack, tabs
6---
7 
8## Use Native Navigators for Navigation
9 
10Always use native navigators instead of JS-based ones. Native navigators use
11platform APIs (UINavigationController on iOS, Fragment on Android) for better
12performance and native behavior.
13 
14**For stacks:** Use `@react-navigation/native-stack` or expo-router's default
15stack (which uses native-stack). Avoid `@react-navigation/stack`.
16 
17**For tabs:** Use `react-native-bottom-tabs` (native) or expo-router's native
18tabs. Avoid `@react-navigation/bottom-tabs` when native feel matters.
19 
20### Stack Navigation
21 
22**Incorrect (JS stack navigator):**
23 
24```tsx
25import { createStackNavigator } from '@react-navigation/stack'
26 
27const Stack = createStackNavigator()
28 
29function App() {
30  return (
31    <Stack.Navigator>
32      <Stack.Screen name='Home' component={HomeScreen} />
33      <Stack.Screen name='Details' component={DetailsScreen} />
34    </Stack.Navigator>
35  )
36}
37```
38 
39**Correct (native stack with react-navigation):**
40 
41```tsx
42import { createNativeStackNavigator } from '@react-navigation/native-stack'
43 
44const Stack = createNativeStackNavigator()
45 
46function App() {
47  return (
48    <Stack.Navigator>
49      <Stack.Screen name='Home' component={HomeScreen} />
50      <Stack.Screen name='Details' component={DetailsScreen} />
51    </Stack.Navigator>
52  )
53}
54```
55 
56**Correct (expo-router uses native stack by default):**
57 
58```tsx
59// app/_layout.tsx
60import { Stack } from 'expo-router'
61 
62export default function Layout() {
63  return <Stack />
64}
65```
66 
67### Tab Navigation
68 
69**Incorrect (JS bottom tabs):**
70 
71```tsx
72import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
73 
74const Tab = createBottomTabNavigator()
75 
76function App() {
77  return (
78    <Tab.Navigator>
79      <Tab.Screen name='Home' component={HomeScreen} />
80      <Tab.Screen name='Settings' component={SettingsScreen} />
81    </Tab.Navigator>
82  )
83}
84```
85 
86**Correct (native bottom tabs with react-navigation):**
87 
88```tsx
89import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'
90 
91const Tab = createNativeBottomTabNavigator()
92 
93function App() {
94  return (
95    <Tab.Navigator>
96      <Tab.Screen
97        name='Home'
98        component={HomeScreen}
99        options={{
100          tabBarIcon: () => ({ sfSymbol: 'house' }),
101        }}
102      />
103      <Tab.Screen
104        name='Settings'
105        component={SettingsScreen}
106        options={{
107          tabBarIcon: () => ({ sfSymbol: 'gear' }),
108        }}
109      />
110    </Tab.Navigator>
111  )
112}
113```
114 
115**Correct (expo-router native tabs):**
116 
117```tsx
118// app/(tabs)/_layout.tsx
119import { NativeTabs } from 'expo-router/unstable-native-tabs'
120 
121export default function TabLayout() {
122  return (
123    <NativeTabs>
124      <NativeTabs.Trigger name='index'>
125        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
126        <NativeTabs.Trigger.Icon sf='house.fill' md='home' />
127      </NativeTabs.Trigger>
128      <NativeTabs.Trigger name='settings'>
129        <NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label>
130        <NativeTabs.Trigger.Icon sf='gear' md='settings' />
131      </NativeTabs.Trigger>
132    </NativeTabs>
133  )
134}
135```
136 
137On iOS, native tabs automatically enable `contentInsetAdjustmentBehavior` on the
138first `ScrollView` at the root of each tab screen, so content scrolls correctly
139behind the translucent tab bar. If you need to disable this, use
140`disableAutomaticContentInsets` on the trigger.
141 
142### Prefer Native Header Options Over Custom Components
143 
144**Incorrect (custom header component):**
145 
146```tsx
147<Stack.Screen
148  name='Profile'
149  component={ProfileScreen}
150  options={{
151    header: () => <CustomHeader title='Profile' />,
152  }}
153/>
154```
155 
156**Correct (native header options):**
157 
158```tsx
159<Stack.Screen
160  name='Profile'
161  component={ProfileScreen}
162  options={{
163    title: 'Profile',
164    headerLargeTitleEnabled: true,
165    headerSearchBarOptions: {
166      placeholder: 'Search',
167    },
168  }}
169/>
170```
171 
172Native headers support iOS large titles, search bars, blur effects, and proper
173safe area handling automatically.
174 
175### Why Native Navigators
176 
177- **Performance**: Native transitions and gestures run on the UI thread
178- **Platform behavior**: Automatic iOS large titles, Android material design
179- **System integration**: Scroll-to-top on tab tap, PiP avoidance, proper safe
180  areas
181- **Accessibility**: Platform accessibility features work automatically
182 
183Reference:
184 
185- [React Navigation Native Stack](https://reactnavigation.org/docs/native-stack-navigator)
186- [React Native Bottom Tabs with React Navigation](https://oss.callstack.com/react-native-bottom-tabs/docs/guides/usage-with-react-navigation)
187- [React Native Bottom Tabs with Expo Router](https://oss.callstack.com/react-native-bottom-tabs/docs/guides/usage-with-expo-router)
188- [Expo Router Native Tabs](https://docs.expo.dev/router/advanced/native-tabs)
189