title: Why React Navigation event "willFocus" not executing?
body: <p>I have created some tabs using react-navigation v2 in react native app. I have created componentDidMount function in which willFocus is called. First time app runs and my desired tab is selected first time, willFocus is not executing. But when I go to different tab and comes back to that tab now willFocus executes. What is the reason willFocus not executes first time and works fine on second time?</p>
  
  <p>Desired tab componentDidMount function
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>componentDidMount(){
      const {navigation} = this.props;
      navigation.addListener ('willFocus', async () =&gt;{
        console.log("willFocus runs"
      });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Tab navigator is nested with other navigators but i am only showing the tab navigator below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>TabNav: createBottomTabNavigator(
          {
              TAB1: Screen1,
              TAB2: Screen2,
              TAB3: Screen3,
              TAB4: Screen4,
              TAB5: Screen5,
              // Map: MapScreen
          },
          {
              initialRouteName: 'Bar',
              transitionConfig: NavigationConfig,
              navigationOptions: ({navigation})=&gt;({
                  tabBarIcon: ({focused, tintColor})=&gt;{
                      const { routeName } = navigation.state;
                      let iconName, iconSize;
                      switch(routeName) {
                                  case "TAB1":
                                      iconName = `icon1`;
                                      break;
                                  case "TAB2":
                                      iconName = `icon2`;
                                      break;
                                  case "TAB3":
                                      iconName = `icon3`;
                                      break;
                                  case "TAB4":
                                      iconName = `icon4`;
                                      break;
                                  case "TAB5":
                                      iconName = `icon5`;
                                      break;
                                  default:
                                      break;
                                  }
                      return &lt;Icon name={iconName} color={tintColor} type="FontAwesome" /&gt;;
                  },
              }),
              tabBarOptions: {
                  activeTintColor: 'black',
                  inactiveTintColor: 'grey',
                  activeBackgroundColor: '#abaf9b',
                  labelStyle: {
                      fontSize: 12,
                  },
                  // style for tabbar
                  style: {
                      backgroundColor: '#ffffff',
                      height: 60,
                      justifyContent: 'space-around',
                      alignContent: 'center',
                      alignItems: 'center',
                  },
                  // style for tab
                  tabStyle: {
                      paddingTop: 7,
                      paddingBottom: 7
                  }
              },
          }
      ),</code></pre>
  </div>
  </div>
  </p>