Bottom Navigation Tabs re-render issue on switching between tabs about react-native-material-bottom-navigation HOT 2 CLOSED

This depends on how you display the content for each tab (usually referred to as "screen"). There should be only 1 instance of <BottomNavigation ... /> in your whole code, alongside your screens. This allows you to switch the contents of the screen depending on this.state.activeTab:

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'white' }}>
        {this.state.activeTab === "books" && <Text>Content for "Books"</Text>}
        {this.state.activeTab === "movies" && <Text>Content for "Movies"</Text>}
        {this.state.activeTab === "music" && <Text>Content for "Music"</Text>}

        <BottomNavigation
          tabs={this.tabs}
          activeTab={this.state.activeTab}
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          useLayoutAnimation
        />
      </View>
    )
  }

If you press a tab, the corresponding content will be displayed, and the BottomNavigation doesn't re-render.

This is a very simple way to navigate between screens. If you need a more advanced navigation, you should consider using a navigation library like https://reactnavigation.org.

from react-native-material-bottom-navigation.

Since this is not an issue with this library, I'm going to close it.

from react-native-material-bottom-navigation.