CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab
Jaakko Saranpää
Jaakko Saranpää

Reputation: 71

How to go back from nested stack screen to other nested stack screen in React Navigation - React Native

I have a React Native app with React Navigation. My current navigation is two Tab navigators, and both of those have a Stack navigation with multiple screens.

My tabs look like this:

<Tab.Navigator
initialRouteName="Home"
>
      <Tab.Screen
        name="Home"
        component={HomeView}
      />
      <Tab.Screen
        name="Message"
        component={MessageView}
      />
</Tab.Navigator>

And my stacks are like this:

// HOME TAB
<Stack.Navigator>
      <Stack.Screen name="Posts" component={HomeView} />
      <Stack.Screen name="User" component={UserView} />
</Stack.Navigator>

// MESSAGE TAB
<Stack.Navigator>
      <Stack.Screen name="Messages" component={MessageView}/>
      <Stack.Screen name="UserProfile" component={UserProfileView} />
      <Stack.Screen name="Chat" component={ChatView} />
      <Stack.Screen name="GroupChat" component={GroupChatView} />
      <Stack.Screen name="Friends" component={FriendsView} />
</Stack.Navigator>

What I am trying to achieve is that I could go Posts -> UserProfile -> Chat -> UserProfile -> Posts, but because Posts stack exists on Home tab, and UserProfile and Chat are on Message tab, I can't seem to do it. I can go from Posts to UserProfile and then to Chat and back to UserProfile. When I press back from UserProfile to Posts, the Tab switches to the Home-tab like it should, however if I switch back to Message-tab, the UserProfile-Stack is still open, and calling goBack() doesn't close it, just takes me back to Home-Tab. So basically I can't get back to Messages-stack if I have opened UserProfile-stack from the Home-tab.

And this problem happens only if I start up my application and don't open Message-tab. If Message-tab has been opened, this all functions as it should.

Am I doing something wrong? Is it possible to load the Message-tab when my app is started, or should I go about this some other way?

Upvotes: 1

Views: 970

Answers (2)

muazzez
muazzez

Reputation: 98

navigation.navigate('other-stack', {
  screen: 'inside-screen',
  initial: false, // you can use
  params: {},
});

If the initial value is set to false, the screen won't be the initial screen of the stack. In this case, when the user launches the application, they won't see this screen directly. Instead, they need to have navigated to this screen through another screen or through another navigation action.

In the code snippet you provided, since the initial value is set to false, the "inside-screen" won't be the initial screen of the "other-stack," and users will access this screen through another screen in the app.

Upvotes: 0

Olivier
Olivier

Reputation: 148

I faced the same issue today, I want to go from Screen A to Screen C, and back to ScreenA. Here is my stack configuration :

  • MainStack: Stack1 & Stack2
  • Stack1 : ScreenA
  • Stack2 > Stack3 : ScreenB, ScreenC

Stack3 is nested inside Stack2. Stack1 and Stack2 are nested inside MainStack.

This is how I navigate from ScreenA to ScreenC :

navigation.push('Stack2', {
        screen: 'Stack3',
        params: {
          screen: 'ScreenC',
        },
      });

When I press the back button it will navigate to ScreenA.

Note that if you specified initial:false, you will go back to ScreenB

Upvotes: 1

Related Questions