I have a tab with multiple components
const HomePageStack = createStackNavigator();
const HomePageScreen = () => (
<HomePageStack.Navigator initialRouteName='Главная' screenOptions={{ headerShown: true, headerTransparent: true, headerTintColor: '#fff', headerTitleStyle: { color: 'rgba(0, 0, 0, 0)' }, }}>
<HomePageStack.Screen name='Главная' component={Home} options={{ title: "Главная" }} style={{ height: '100%' }} />
<HomePageStack.Screen name='Рецепт' component={Recipe} option={{ title: 'Рецепт' }} style={{ height: '100%' }} />
<HomePageStack.Screen name='Аккаунт' component={Account} option={{ title: 'Аккаунт' }} style={{ height: '100%' }} />
</HomePageStack.Navigator>
)
When checking, I go this way (using navigation.navigate with data)
Home -> Recipe -> Account -> Recipe
Back Button works fine until I switch to the Recipe a second time
When I go to the Recipe for the second time and click back button, I am sent to the main page, but I want to be in the Account
I have not customized or changed how the back button works.
Redirect function (from Account to Recipe 2):
const handleRecipe = (_id) => {
navigation.navigate('Рецепт', { _id })
}
I want the back button to work as expected and redirect the user to the Account and not to the Home page. I suspect the problem is with my redirect function.
navigate pops back to earlier in the stack because the Recipe screen is already present there. To push another instance of Recipe on the navigation stack you can use the push action instead. So on the Account screen you use the push action instead of the navigate action to avoid going back to the already present Recipe screen. See https://reactnavigation.org/docs/stack-actions/#push for an example.