I am using expo router. I have a stack navigator nested inside a tab navigator. This is my setup.
Tab 1: Screen 1
Tab 2: Screen 2
Tab 3: Stack Navigator
If I browse deep into the Stack Navigator on Tab 3, then click on one of the other tabs (e.g. Tab 1), then click back to the Stack Navigator, expo router is maintaining the position of that stack. But I want it to go back to the top of the stack.
With react navigation, we had the tabBarOnPress option which allowed us to pop the stack back to the top (see stackoverflow article). But expo router doesn't seem to have this.
Can someone help me to achieve this behaviour with expo router?
expo-router
's tabs wraps the Bottom Tabs from React Navigation.
Therefore you can achieve this behavior by using umounntOnBlur
and setting it to true
.
More info about umountOnBlur
can be found in the bottom-tab-navigator
docs
<Tabs
screenOptions={{
// for all tabs
unmountOnBlur: true,
...
}}
>
<Tabs.Screen
name="someScreen"
options={{
// only for this specific tab
unmountOnBlur: true,
...
}}
/>
</Tabs>