Working example

[omi10859]

What kind of Issue is this?

Problem Its a very great plugin but I'm not able to use it in my app, tried things nothing working Can you please make a documnet where you mention a live working example changing screens on click something like this here: https://stackoverflow.com/questions/49978995/change-content-of-tabs-in-react-native-material-bottom-navigation-and-react-n

Thanks

ps: I also tried to fill your issue template 💯

[timomeh]

react-native-material-bottom-navigation is unopinionated, which means there is no "real and only way" on implementing it with any routing library. From an outside perspective, the BottomNavigation is just like having multiple Buttons. The BottomNavigation is no navigation library, it is just a big fancy button.

You can find a working example of the BottomNavigation here: https://github.com/timomeh/react-native-material-bottom-navigation/blob/master/examples/Playground/App.js This example doesn't use a navigation library. You can render anything you want by using this.state.activeTab:

export default class App extends React.Component {
  state = {
    activeTab: 'games'
  }

  // this.renderTab and this.tabs are hidden in this example,
  // check the docs for the full code

  render() {
    const { activeTab } = this.state

    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          {activeTab === 'games' && <GamesScreen />}
          {activeTab === 'movies' && <MoviesScreen />}
          {activeTab === 'news' && <NewsScreen />}
        </View>
        <BottomNavigation
          activeTab={activeTab}
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          tabs={this.tabs}
        />
      </View>
    )
  }
}

This is a very simple but naive approach. I don't recommend doing it this way. You should rather use a navigation library.
As I wrote in the Usage-Docs on "Changing your screen":

If you want to display different contents on your screen depending on the active tab, you can use the onTabPress prop and save the active tab in your state. Check out the Chapter Controlled Component.

You most likely want to use this together with a navigation library, e.g. React Navigation or React Native Navigation.

If you use react-navigation for example, you can do something like this:

<BottomNavigation
  onTabPress={newTab => navigation.navigate(newTab.key)}
/>

Check the React Navigation Docs for a full guide on how to do navigation.

I recommend that you choose a Navigation Library first and read their docs before you add the BottomNavigation into your project.

---

Note: I'm closing this issue because it's a question and not a real issue or bug.