Tab navigation state reset when switching back and forth between tabs

[bencreynolds]

In case my title isn't clear, I'll present an example app. It has a bottom tab navigator with two tabs: "Home" and "Account". The Home tab has two screens, the initial screen being a product listing and a second screen for a product. Clicking on a product listing on the first screen navigates the user to the second screen (the product screen). The Account tab has a single screen which just lists the user's account information.

Scenario: The user navigates to a specific product screen from the product listing screen in the Home tab. User then switches tabs to the Account tab and then switches back to the Home tab. When the users switches back to the Home tab, it is back on the product listing screen and not the specific product screen the user was originally on.

I fundamentally understand why this is the case based on how the "href" prop for the tab works, but can this behavior be avoided? This behavior is not default on React Navigation, so certainly it's avoidable. Is there a simple solution to this problem I am not considering?

[EvanBacon]

Create a custom tabBarButton option instead of using href for the dynamic tab. The React Navigation approach involves setting the initialProps for the screen but this has the undesired effect of breaking when a user reloads the page or deep links to a specific slug.

[bencreynolds]

Hey, I don't want to come off as asking to be spoonfed, but could you give some more info? I'm not really sure what would be needed to change this behavior. In my mind, a custom button wouldn't really change anything, ultimately I'm still telling it where to link, right? I think I'm just a bit confused how to bridge between React Nav and Expo Router logically.

[timoisalive]

I've been trying to get my Profile tab (with username param) working, but the only way has been with a custom tabBarButton.

I have a simple example and specifically the tab layout here: https://github.com/timoisalive/expo-router-test/blob/main/app/(app)/_layout.tsx

Would you @EvanBacon please confirm if this is the way to do it, and also comment on why does it differ from the example in the documentation: https://expo.github.io/router/docs/guides/tabs#dynamic-routes

[JoseArron]

You could set unmountOnBlur : true in the options, like so

unmountOnBlur

<Tabs.Screen name='home' options={{ tabBarLabel: 'Home', unmountOnBlur: true, }} />