CODEWITHSUNDEEP
react-nativereact-native-navigation
Yama
Yama

Reputation: 431

Going back isn't popping navigation corretly with React Navigation 5

The way I have my set up currently is

Root Navigation

ProfileStack

The problem I am having is. When I go to the LandingPage -> ProfilePage (userId 4) -> Following then press navigation.goback() has not problem. It takes me back to the user page. When I try

LandingPage -> ProfilePage (userId 4) -> Following -> ProfilePage (userId 5) -> goBack() the result isn't going back to the following listing page but instead back to the LandingPage.

I thought within React Navigation it follows a history such that going back results in popping off the current page and going back to the last one we visited. Am I not understanding this part? The way I am going back for my navigation is:

return <ProfileStack.Navigator>
    <ProfileStack.Screen name="ProfilePage" component={Profile} options={({ route, navigation }) => {
        return {
            title: "Profile Page",
            headerLeft: () => {
                return <Ionicons onPress={() => navigation.goBack()} name="md-arrow-round-back" size={30} color="black" style={{ marginLeft: 15 }} />
            },
            headerRight: () => {
                return <Ionicons onPress={() => navigation.navigate('EditProfile')} name="ios-settings" size={30} color="black" style={{ marginRight: 15 }} />
            }
        }
    }
    } />
    <ProfileStack.Screen name="ProfileFollowers" component={ProfileFollowers} options={() => {
        return {
            title: 'Follower'
        }
    }} />
    <ProfileStack.Screen name="ProfileFollowing" component={ProfileFollowing} options={() => {
        return {
            title: 'Following'
        }
    }}/>
    <ProfileStack.Screen name="Setting" component={Settings} />
</ProfileStack.Navigator>

Upvotes: 1

Views: 514

Answers (1)

HamidReza Ghafouri
HamidReza Ghafouri

Reputation: 94

You can still use the following command:

navigation.navigate(Screen)

React navigation is such that it stores screens in a stack. So the second cell in your stack is always the page you navigated to the new page. Finally, using the same command, you will have an experience similar to goBack(). React navigation detects that you are returning to the previous page. So there will be no problem. Of course, there are ways to solve your problem. But for now, this is the fastest way to get there. And there is no wrong way.

Upvotes: 2

Related Questions