exponavigationstack-navigatortabnavigatorexpo-router

How to pop on the top of stack once the tab is changed with Expo router?

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?

Solution

  • 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>