CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Flatt ME
Flatt ME

Reputation: 25

React native. Back button redirect to the Home page

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.

Upvotes: 0

Views: 1306

Answers (1)

Thijs
Thijs

Reputation: 738

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.

Upvotes: 1

Related Questions