react-navigation / react-navigation/react-navigation.github.io

Clarify StackNavigator inside DrawerNavigator gotchas

Open
#117 16 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted
Dominant language
JavaScript
Stars
324
Forks
2k
PR merge metrics
No merged PRs in 30d

Description

Moved from https://github.com/react-navigation/react-navigation/issues/3890


Using multiple Navigators inside a DrawerNavigator, where the subnavigators shared a route name, led to unexpected (undocumented) behavior

software version
react-navigation 1.5.9
react-native expo@26

Context

I was an early user of @expo/ex-navigation, and have recently been upgrading to react-navigation. I came across some faults in either the DrawerNavigation documentation or in the general mental framework of react-navigation.

Current Behavior

When nesting navigators inside a DrawerNavigator, duplicated route names behave unexpectedly (in my mental model).
Expo Snack repro

const WidgetStack = StackNavigator({
  Widget: {
    screen: WidgetScreen,
  },
  // This is very easy to get wrong, it is not clear in the Drawer documentation
  // that this route name should be distinct.
  Settings: {
    screen: SettingsScreen,
  },
});

const SettingsStack = StackNavigator({
  Settings: {
    screen: SettingsScreen,
  },
});

const DrawerApp = DrawerNavigator({
  Widget: {
    screen: WidgetStack,
  },
  Settings: {
    screen: SettingsStack,
  },
}, {
  initialRouteName: 'Widget',
});

When tapping on the "Settings" drawer item, I expected the currently selected "tab" in the drawer to be "Settings", I expected no routes to be "pushed" onto my stack navigator. Instead, the "widget" tab stays selected, and a settings route is pushed onto the WidgetStack.

There were no pieces of documentation to warn me of this behavior, and it was actually very difficult to even tell this is what was happening (it was much easier when I decided to build the minimal repro).

My current mental model

My mental model for react-navigation was previously that each nested navigator was a "subtree". With that model, I saw no issue with a duplicated route name.

               DrawerApp
	      /         \
	  WidgetStack    SettingsStack
          |     |	       |
	  /      \           Settings
	Widget   Settings

I'm not here to debate whether this is the correct model, but a simple piece of documentation would have saved me about an entire day :(

I would be happy to submit a PR to address this, but it appears with the 2.0 push, this might be out of date, and furthermore - I am not sure if my current model is correct enough to even write docs.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the DrawerNavigator and nested StackNavigator documentation, then review the linked Expo Snack and the referenced 2.0 push to determine whether the behavior still applies. Update the relevant documentation to explain the duplicated route-name gotcha and nesting model, with the current example or reproduction showing what is documented as done.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, react-native
Domain
documentation, mobile-dev
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.