How to initialize Stack navigator? - react-native

Question

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.

Answer 1

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>
)
}