React Navigation - tutorial for nesting navigators: TabNavigator overwrites StackNavigator

Question

While working through the React Navigation tutorial on nesting navigators, I find that the tab navigator, MainScreenNavigator, overwrites the stack navigator, SimpleApp. The result is that the tabbed screens called in that object are the only ones that are displayed. The expected behavior that does not occur is that the button which links to the nested navigator never displays, so I cannot access the ChatScreen object.

const MainScreenNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});

I've spent hours trying to understand what I might have missed. This is my first attempt at learning this package, so I don't know if the tutorial is wrong, or that I missed a detail that breaks the process. The entire App.js file is located here.

Your help is much appreciated.

Bright Lee Bright Lee · Accepted Answer · 2018-01-16T13:41:45

First, you need to pass StackNavigator's navigation to screens of Tabs. Because they are only screens you can deal with now since it's a initial screen.

const MainScreenNavigator = TabNavigator({
  Recent: { screen: ({screenProps}) => <RecentChatsScreen screenProps={screenProps}/>,
  All: { screen: ({screenProps}) => <AllContactsScreen screenProps={screenProps}/> },
});

//I added the export keyword.
export const SimpleApp = StackNavigator({
  Home: { 
    screen: ({navigation}) => <MainScreenNavigator screenProps={{myStackNavigation:navigation}}/>,
    navigationOptions: {
      title: 'My Chats',
    },
  },
  Chat: { screen: ChatScreen },
})

Now, you can call below code in RecentChatsScreen or AllContactsScreen.

this.props.navigation.screenProps.myStackNavigation.navigate('Chat');

React Navigation - tutorial for nesting navigators: TabNavigator overwrites StackNavigator

1 Answers