title: How to update the state of badge counter in Tab Navigator in react-native
body: <p>I have used the createBottomTabNavigator for the tab bar. And in the tab-bar on notification the count is shown by custom build badge. The problem is whenever the notification  is updated the count on the icon in tab-bar does not change. I have to navigate  on click on anyother item to get the count updated. I have used the AsyncStorage  to store the count in Notification Component  and get that count in custome Component  which gets called in tabnavigator.</p>
  
  <pre><code>class TabNotificationCount extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              focus: false,
              notificationCount: 0,
          }
      }
  
      componentWillReceiveProps(nextProps) {
          this.setState({ focus: nextProps.isfocus })
          AsyncStorage.getItem('@count', (err, value) =&gt; {
              this.setState({ notificationCount: value })
              console.log("value-notification", this.state.notificationCount);
          })
      }
  
      render() {
          const { notificationCount } = this.state;
          const icon = this.state.focus ? require('../../../images/bell-active.png') : require('../../../images/bell-active.png');
          return (
              &lt;View style={{ flexDirection: 'row' }}&gt;
                  &lt;Image source={icon} style={{ width: 22, height: 22, }} /&gt;
                  &lt;Text style={{ position: 'absolute', top: -10, right: -15, borderRadius: 10, backgroundColor: 'red', color: '#fff', }}&gt;{" " + notificationCount + " "}&lt;/Text&gt;
              &lt;/View&gt;
          );
      }
  
  }
  </code></pre>