How to initialize Stack navigator?-CodePudding

I have a Bottom Tabs Navigator that contains a Stack Navigator on each tab.

const MainNavigator = createBottomTabNavigator<MainRoutes>();

export interface MainNavProps {
  user: User,
  signOut: SignOut
}

export function MainNav({ user, signOut }: MainNavProps) {

  return (
    <MainNavigator.Navigator initialRouteName="DashboardSection" screenOptions={mainScreenOptions}>
      <MainNavigator.Screen name="DashboardSection" component={DashboardStack} options={dashboardOptions} />
      <MainNavigator.Screen name="HashSection" component={HashStack} options={hashesOptions} />
      <MainNavigator.Screen name="AccountSection" component={AccountStack} options={accountOptions} />
    </MainNavigator.Navigator>
  )
}

I want to emphasize here the HashStack Navigator. It consists of two screens, namely:

const HashNavigator = createStackNavigator<HashRoutes>();

const screenOptions = ({ navigation, route }: HashStackProps): StackNavigationOptions => {

    const pressHandler = () => navigation.navigate("Modify", { title: "modify hashes" });

    return {
        ...sectionScreenOptions,
        headerRight: function HeaderLeft() {
            return (
                route.name === "Index" ?
                    <Button
                        marginR-10
                        iconSource={() => (
                            <MaterialCommunityIcons name="plus" color={Colors.primaryDarker} size={28} />
                        )}
                        style={{ width: 35, height: 35 }}
                        color={Colors.primaryDarker}
                        outline
                        outlineColor={Colors.primaryDarker}
                        onPress={pressHandler}
                    /> : <></>
            );
        },
        headerTitle: route.params.title
    }
}

export function HashStack() {
   
    return (
        <HashNavigator.Navigator initialRouteName="Index" screenOptions={screenOptions} >
            <HashNavigator.Screen name="Index" component={Hash} initialParams={{ title: "hashes overview" }} />
            <HashNavigator.Screen name="Modify" component={ModifyHash} />
        </HashNavigator.Navigator>
    );
}

To simplify the explanation I recorded a video:

https://user-images.githubusercontent.com/56756949/137601978-9d3aec89-3732-42a4-834b-b427bc1f73ca.mp4

When I press the tab Hashtag, which is in the middle of the screen it shows the HashStack component.
As you can see the headerRight property on the HashStack ScreenOptions is active and it shows a plus button. Clicking on the plus button it navigates to the Modify route within HashStack. Then pressing on the tab Dashboard, which is the first Route in the Bottom Tabs Navigator and press the Hashtag tab again, it does not show the initial route screen, which is:

<HashNavigator.Screen name="Index" component={Hash} initialParams={{ title: "hashes overview" }} />

The question is, how to reset the HashNavigator when another Bottom Tab has been pressed so that the Hashtag tab always shows the initial route Index.

CodePudding user response：

You can pass unmountOnBlur: true inside the tab screen options of the HashStack

const hashesOptions = {
  // other options
  unmountOnBlur: true
}
export function MainNav({ user, signOut }: MainNavProps) {

  return (
    <MainNavigator.Navigator initialRouteName="DashboardSection" screenOptions={mainScreenOptions}>
      <MainNavigator.Screen name="DashboardSection" component={DashboardStack} options={dashboardOptions} />
      <MainNavigator.Screen name="HashSection" component={HashStack} options={hashesOptions} />
      <MainNavigator.Screen name="AccountSection" component={AccountStack} options={accountOptions} />
    </MainNavigator.Navigator>
  )
}