[Question] Proper way to use BottomNavigation with react-navigation?

What kind of Issue is this?

Question / Problem

Actual behavior

I'm using the example of BottomNavigation to build my simple app. I want the app to have 3 tabs managed by BottomNavigation.

  renderContent = () => {
    switch (this.state.activeTab) {
    case "dashboard":
      return <DashboardStack />;

    case "order":
      return <OrderStack />;

    case "products":
      return <ProductStack />;

    default:
      return <View />;
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>{this.renderContent()}</View>
        <BottomNavigation
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          tabs={this.tabs}
        />
      </View>
    );
  }

renderContent() function return a StackNavigator of react-navigation, based on activeTab. And I received the warning You should only render one navigator explicitly in your app..., it is described here: Explicitly rendering more than one navigator

If I use only react-navigation:

const AppStack = createBottomTabNavigator({
  DashboardStack,
  OrderStack,
  ProductStack
});

export default AppStack;

then the warning is gone. It seems that it is solved by export the stack directly instead of placing it inside a component (which is used by the example).

Expected behavior

So what is the proper way to use BottomNavigation? I'm new to react native so maybe this is a silly question.

Additional resources

Environment

software	version
react-native-material-bottom-navigation	1.0.0
react-native or expo	0.55.4
node	v8.11.2
npm or yarn	5.6.0

The warning you got sounds like a warning from react-navigation, which is unrelated to the material bottom navigation. I think (dangerous superficial knowledge) that react-navigation wants you to put one navigator around your three StackNavigator's. This one "base navigator" would be responsible for switching to the correct StackNavigator, based on the active tab from BottomNavigation.

Unfortunately that's all I can help you with react-navigation, because I currently don't really use react-navigation. If you need more support, you'd be better off asking them. 🙂

If you got it working, post your solution here to share your knowledge.

Since this is not an issue with react-native-material-bottom-navigation, I'm going to close this issue, but you can still comment below.

timomeh / react-native-material-bottom-navigation