1

so I am coding a simple app with react-navigation and I want to code this:

- Home (Tab)
- Profile (Tab)
-- User info (Stack screen)
--- Edit user info (Stack screen) - (screen with input to edit name, email etc...)

When I click save on the EditInfo screen I have a button on the right side of the header Done, this button should navigate back to the UserInfo screen where you can see the updated details.

BUT! Everything works but when I click Done on the EditInfo screen, it navigates back to Home! Why is that?

Thanks for help

insider
  • 181
  • 1
  • 12

2 Answers2

1

Could you please put the code of the service screen where you call the goBack function, it could be helpful. Generally you just call

You are either using the wrong Navigator comp or your requirements are not clear. Basically, You would like to use the StackNavigator for your desired behavior.

The catch is, DrawerNavigator is used to build up a drawer menu. If you swipe from the left you'll see your navigator drawer containing all of your screens as you can see in the image below enter image description here

If you add a button on your screen like below, you'll see your menu open.

<Button title="MENU" onPress={() => this.props.navigation.navigate('DrawerOpen')} />

The conclusion is, whenever we use DrawerNavigator we always go back to initial route, which is whatever we defined as the first item or using the initialRouteName key of the second param of the DrawerNavigator.

It's only the StackNavigator that supports this stacking order you would like to achieve, as the name suggests itself.

What you can do is to wrap a new StackNavigator inside one of the screens of the DrawerNavigator. For example:

const AppNavigator = DrawerNavigator({
    drawer1: {
        screen: drawer1,
    }
});

const drawer1 = StackNavigator({
    one: { screen: one },
    two: { screen: two },
    three: { screen: three },
});
Eduard
  • 311
  • 1
  • 4
  • Well, I use Stack not Drawer because I ran into some issues with some animation packages and overall it seems a bit weird using Drawer in apps :D Anyways, I was passing a route parameter of username to the screen so I can put it into the header, I removed this param, put generic text in the header, and replaced navigation.goBack() with navigation.navigate() to the previous screen :D A bit weird workaround but it works just fine for me – insider Jul 28 '22 at 21:13
1

Maybe this answer would help you.

In a nutshell: maybe you need to specify backBehaviour param in your Tabs navigator.

Aliaksei
  • 1,094
  • 11
  • 20