[v5] bottomTabNavigator: on tabPress -> sharedElementStackNavigator doesn‘t navigate to initialRoute

[jakobmeusburger]

I nested my SharedElementStackNavigator in a BottomTabNavigator. If I click on the corresponding Icon in the BottomTabNavigator the TabNavigator navigates to the SharedElementStackNavigator (if it isn't already open), but the popToTop action of the SharedElementStackNavigator isn't fired. If I replace the createSharedElementStackNavigator with the normal createStackNavigator everything works fine, but, of course, the Animation is lost.

So I have the problem, that I don't get navigated to the initialRoute of the SharedElementStackNavigator, if I press on the corresponding Icon in the TabBar, although that's normally standard.

Im am using the v5-navigation.

How do I solve this issue? Or is a fix planned?

[darrylyoung]

I also just came across this issue.

Did you find a workaround to keep the old functionality but have the new animation, @jakobmeusburger? Thanks.

[jakobmeusburger]

I also just came across this issue.

Did you find a workaround to keep the old functionality but have the new animation, @jakobmeusburger? Thanks.

No, not until now. I am using it without the old functionality for now. I really hope that this gets fixed.

[tedi]

@jakobmeusburger @darrylyoung I ran into the same thing. I am working around it by adding a tabPress listener and checking the current index. If I detect that the user is already in that stack and not on the first index, I then popToTop.

Hope that helps.

[VictorioMolina]

@tedi can you share your code? I am trying to do exactly the same, but for some reasons, the "popToTop()" is executed in my previous tab, not in the one I am navigating to.

      <Tab.Screen
          name="Profile"
          component={ProfileStacks}
          listeners={({ navigation, route }) => ({
            tabPress: () => {
              Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

              /* 
                📝 Note: The stack navigator which is implemented in the library
                'react-navigation-shared-element' doesn't works with the default tab press
                behaviour from 'react-navigation'. 

                https://github.com/IjzerenHein/react-native-shared-element/issues/52

                In order to fix this issue, we have had to implement our popToTop()
                in the press listener.
              */

              /*
                Only pop to top if we are in the profile stacks, with multiple screens opened,
                and then we press the tab again. 
              */

              if (route.name === "Profile" && route.state?.routes.length > 1) {
                navigation.popToTop();
              }
            },
          })}
        />