react-nativestack-navigatorreact-navigation-v5

How to set always first screen of Stack Navigator inside Tab Navigator React Navigation 5


React Navigation 5

I've build a StackNavigator inside of a TabNavigator, and the navigation between home screen and other screens is working. But the problem is,When I move from Tab2 to Tab1 I expect Tab1 always show me first screen of StackNavigator.

tab1
   -> Stack
        -screen1
        -screen2
tab2

I am on screen2 and then move to tab2 after that then I move back to Tab1 I want to always display screen1.

I am try to use

OnTabPress({navigation})=>{
    navigation.navigate("stackName",{
     screen: "screen1"
   }).
}

Its work but its show me screen2 first then navigate to screen1. Is there any other Solution. https://snack.expo.io/@usamasomy/groaning-donut


Solution

  • Use unmountOnBlur: true in options. Eg.

    <Tab.Screen
            name="Stack1"
            component={Stack1}
            options={{
              tabBarLabel: "Stack1",
              unmountOnBlur: true,
            }}
          />
    

    So when you are navigating away from this tab and you're on screen2 of Stack1, you will always come on the first screen of this stackNavigator when coming back to this tab.