TabBar not updating the badge

[amanthegreatone]

Hi,

I have setup a SlidingTabNavigation with 2 tabs. On the first tab I am displaying a custom badge with the value derived from an array (openleads) which is passed as props to the component through redux store. But when this array is updated the badge value is not changing. The renderHeader method does not get called when the props update. Can someone help me out on this.

Here is the component class:

class MyLeads extends Component {

  static route = {
    navigationBar: {
      title: 'My Leads',
      ...SlidingTabNavigation.navigationBarStyles,
      //visible: false
    }
  }

  //for SlidingTabNavigation Tab title
  renderLabel = ({ route }) => {
    console.log('props', this.props);
    switch (route.key) {
      case 'openleads':
      return (
        <View style={styles.tabBadge}>
          <Text style={styles.tabText}>Open</Text>
          <View style={styles.badge}>
            <Text style={styles.badgeText}>{this.props.openLeads.length}</Text>
          </View>
        </View>
      );

      case 'closedleads':
      return <Text style={styles.tabText}>Closed</Text>;
    }
  }//end of renderLabel

  //for rendering scrollable tabs in SlidingTabNavigation
  renderHeader = (props) => (
    <TabBar
      scrollEnabled
      style={styles.tabbar}
      indicatorStyle={styles.tabIndicator}
      renderLabel={this.renderLabel}
      {...props} />
  );//end of renderHeader

  render() {
    console.log(this.props);

    if (this.props.navigator.getCurrentRoute().routeName !== 'myleads') {
    return null;
    }

    return (
      <SlidingTabNavigation
        id="leadlist"
        navigatorUID="leadlist"
        barBackgroundColor={COLOR_MYLEADS_SLIDING_TAB}//for SlidingTabNavigation
        indicatorStyle={styles.tabIndicator}//for SlidingTabNavigation
        swipeEnabled //for SlidingTabNavigation
        renderHeader={this.renderHeader}//for SlidingTabNavigation scrollable tabs
        initialTab="openleads">

        <SlidingTabNavigationItem id="openleads">
          <View style={{ flex: 1 }}>
            <OpenLeadsContainer
              navigator={this.props.navigator}
              navigation={this.props.navigation} />
          </View>
        </SlidingTabNavigationItem>

        <SlidingTabNavigationItem id="closedleads">
          <View style={{ flex: 1 }}>
            <ClosedLeadsContainer
              navigator={this.props.navigator}
              navigation={this.props.navigation} />
          </View>
        </SlidingTabNavigationItem>

      </SlidingTabNavigation>
    );
  }

}//end MyLeads