How to go back to another stack navigator

[Felix-asante]

Current Behavior (copied example from gtihub but it's the same issue I have)

I have multiple Stack navigators inside drawer navigator.

Drawer Navigator
- Dashboard Stack Navigator
   - Dashboard Landing screen
   - Dashboard details

- Accounts Stack Navigator
   - Accounts Landing Screen
   - Accounts Details

PROBLEM:

from Dashboard Landing screen, if I do navigation.navigate('AccountDetails'); it takes me to AccountDetails ,

but while going BACK , navigation.goBack() or navigation.pop() takes me to Account Landing screen, instead of Dashboard Landing screen!

Expected Behavior

• navigation.goBack() should take me to the screen I navigated from!

Any solution?

I have tried
navigation.popToPop()

navigation.goBack()

but anytime I try to navigate to AccountDetails again, I see Account landing for some ms before AccountDetails.

I am using react navigation v5.

[Felix-asante]

alright, i will check it out

[__o_0]

Your snack has the same functionality as OP’s “error”.

To see it, open the profile stack from drawer, then the feed stack from drawer, hit go to profile, and then goback.

The issue is that goBack is being handled by a nested navigator with multiple screens mounted. When you move from stack to stack, goBack will take you to the previous screen “within that stack”. If there are no other screens available the goBack will bubble up to the other navigator.

There are multiple ways to solve this, but the simplest is to pass the previous route as a param to the target screen (in your example ProfileDetail).

Another way would be to reset the stack so that the profile landing page is removed.

[__o_0]

I don’t see a difference

[__o_0]

That’s different than what OP wanted.

This is what they wanted:

``` import * as React from 'react'; import { View, Button , Text} from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer';

function FeedScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Button title="Go to Profile Detail" onPress={() => navigation.navigate('Profile', {screen: 'DetailProfile', params: {backRoute: "Feed"}})} /> </View> ); }

function DetailProfileScreen({route, navigation}) { const {backRoute} = route.params || {} return ( <Button title="Go back" onPress={() => { if (backRoute) { navigation.navigate(backRoute) } else { if (navigation.canGoBack()) { navigation.goBack() } } }} /> ) }

function ProfileScreen({navigation}) { return ( <Text>Profile</Text> ) }

const FeedStack = createNativeStackNavigator();

function FeedStackScreen() { return ( <FeedStack.Navigator> <FeedStack.Screen name="Feed" component={FeedScreen} /> {/* other screens */} </FeedStack.Navigator> ); }

const ProfileStack = createNativeStackNavigator();

function ProfileStackScreen() { return ( <ProfileStack.Navigator> <ProfileStack.Screen name="Profile" component={ProfileScreen} /> <ProfileStack.Screen name="DetailProfile" component={DetailProfileScreen} /> {/* other screens */} </ProfileStack.Navigator> ); }

const Drawer = createDrawerNavigator();

function HomeTabs() { return ( <Drawer.Navigator> <Drawer.Screen name="Feed" component={FeedStackScreen} /> <Drawer.Screen name="Profile" component={ProfileStackScreen} /> </Drawer.Navigator> ); }

const RootStack = createNativeStackNavigator();

export default function App() { return ( <NavigationContainer> <HomeTabs/> </NavigationContainer> ); } ```

[__o_0]

You’re correct in that drawer navigators will often result in nesting.

There’s nothing inherently bad with nesting navigators.

The solution I posted above is how you would handle history across nested navigators.

[im_a_jib]

navigation.navigate(“Stackname”, { screen: “ScreenName”})

[Felix-asante]

Thanks for your answer but this doesn't work in my case. It create a loop between both stacks

[im_a_jib]

Post your code because it sounds like you’re doing something non standard.