Bottom Navigation Tabs re-render issue on switching between tabs

[SAHITYASAI]

55 # What kind of Issue is this?

Question / Problem

Actual behavior

• Bottom navigation tabs are re-rendering on switching between different tabs.
• It happening on both Android and iOS.

Expected behavior

• I want the bottom tabs to re-render only for the first time a particular tab is pressed and simply display the rendered data on switching between the tabs after first time.

Additional resources

• I found onTabChange prop for bottom navigation but could not understand how to use it or if it is useful for my case or not. I am implementing bottom navigation tabs in a client project and need help as soon as possible. Thanks in advance. <BottomNavigation tabs={this.tabs} activeTab={this.state.activeTab} onTabPress={newTab => { this.setState({ activeTab: newTab }); this.props.getActiveTab(newTab); }} renderTab={this.renderTab} useLayoutAnimation />

  Environment

| macOS | High Sierra | react-native-material-bottom-navigation | ^1.0.4 | react-native | 0.61.1

[timomeh]

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.

[timomeh]

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