title: How to handle click event on tab item of TabNavigator in React Native App using react-navigation?
body: <p>I am programming React Native App. I am using react-navigation for navigating screens.</p>
  
  <p>I have 2 Stack Navigators, they are stayed in a Tab Navigator. I want handle click event when I press tab item on TabBar to refresh its view.</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>export const HomeStack = StackNavigator({
    Home: {screen: ScreenHome},
    Detail: {screen: ScreenDetail}
  })
  export const UserStack = StackNavigator({
    User: {screen: ScreenUser}
  })
  export const Tabbar = TabNavigator({
    HomeTab: {
      screen: HomeStack,
    },
    UserTab: {
      screen: UserStack,
    }   
  }, {
    tabBarComponent: ({ jumpToIndex, ...props}) =&gt; (
         &lt;TabBarBottom
            {...props}
            jumpToIndex={(index) =&gt; {
              if(props.navigation.state.index === index) {
              props.navigation.clickButton(); //----&gt; pass props params (code processes)
            }
            else {
              jumpToIndex(index);
            }
          }
        }
      /&gt;
     ),
     tabBarPosition: 'bottom'
  });
  class TabClass extends Component{
    constructor(props){
      super(props)
      this.clickButton = this.clickButton.bind(this)
    }
    clickButton(){
      console.log('click button')
    }
    render (){
      return (
        &lt;Tabbar  clickButton={()=&gt; this.clickButton()}/&gt;
      )
    }
  }
  </code></pre>
  
  <p>I want to pass clickButton() function from TabClass Component to the code which processes event click tab bar. When if(props.navigation.state.index === index), I want it will call clickButton(). I try it but it doesn't work. 
  Is there any way to solve my matter?</p>
  
  <p>I tried onNavigationStateChange(prevState, currentState).</p>
  
  <pre class="lang-js prettyprint-override"><code>class TabClass extends Component{
    constructor(props){
      super(props)
      this.clickButton = this.clickButton.bind(this)
    }
    clickButton(){
      console.log('click button')
    }
    _handleNavagationStateChange(prevState, currentState){
      console.log('handle navigation state change')
    }
    render (){
      return (
          &lt;Tabbar onNavigationStateChange={(prevState, currentState) =&gt; {
            this._handleNavagationStateChange(prevState, currentState)
          }}
          clickButton={()=&gt; this.clickButton()}
          /&gt;
      )
    }
  }
  </code></pre>
  
  <p>However, _handleNavagationStateChange(prevState, currentState) only run when navigation state changes (for examples, if I stay at HomeTab, I click User Tab Item, this function will run; if I stay at HomeTab, I click Home Tab Item, this function will not run).</p>
  
  <p>Is there any way to handle click event on tab item.</p>