title: 'focus' listener not calling every time. React Native
body: <p>I am new in react native technology. I have used following hierarchy in my react native app.</p>
  <ol>
  <li><p>I have used Stack.Navigator in which I am using various screen, I. Login, II. Sign-Up, III. TabBar Screen.</p>
  </li>
  <li><p>In TabBar screen I have used various individual Stack.Navigator because I have to show tab bar on every child screen.</p>
  </li>
  <li><p>Now problem is that I have to update some value on tab screen when user click on that particular screen. It is calling once at first time, not working second time.</p>
  </li>
  </ol>
  <p>I have used following code for execute 'focus' listener on tab screen :-</p>
  <pre><code>  onScreenFocus = () =&gt; {
       this.reloadFavrouite()
       alert(&quot;again calling&quot;)
   }
  
   componentDidMount() {
       this.props.navigation.addListener('focus', () =&gt;     this.onScreenFocus())
       this.reloadFavrouite()
   }
  </code></pre>
  <p>'focus' listener work well If I am not use individual Stack.Navigator at every tab screen, but it is creating another issue is that tab bar not showing in child screen.</p>
  <p>I have used this tab navigator code:- Please check</p>
  <pre><code>export default class TabNavigator extends React.Component {
      constructor(props) {
          super(props);
      }
      render() {
          return (
              &lt;Tab.Navigator initialRouteName='Home' lazy={true} tabBarOptions={
                  {
                      style: {
                          backgroundColor: '#FFFFFF',
                          borderTopLeftRadius: 25,
                          borderTopRightRadius: 25,
                          overflow: 'hidden',
                          borderColor: 'transparent',
                      }
                  }
              }&gt;
                  &lt;Tab.Screen name=&quot;HomeNavigator&quot; component={HomeNavigator} 
                      options={{
  
                          tabBarLabel: ({ focused }) =&gt; {
                              const tintColortab = focused ? &quot;#006C35&quot;
                                  : &quot;#000000&quot;
                              return (
                                  &lt;Text style={{ color: tintColortab, fontSize: 8, fontFamily: &quot;Roboto-Bold&quot;, marginBottom: 6 }}&gt;{StringsOfLanguages.Home}&lt;/Text&gt;
                              )
                          },
  
                          tabBarIcon: ({ focused }) =&gt; {
                              const tintColortab = focused ? &quot;#006C35&quot;
                                  : &quot;#000000&quot;
                              return (
                                  &lt;Image source={require('../../../assets/images/TabBarIcons/ic_home_selected/ic_home_selected.png')}
                                      style={{ marginTop: 10, tintColor: tintColortab }}&gt;
                                  &lt;/Image&gt;
  
                              )
                          }
                      }}&gt;         
                  &lt;/Tab.Screen&gt;
                  &lt;Tab.Screen name=&quot;FavouriteNavigator&quot; component={FavouriteNavigator}
                      options={{
                          tabBarLabel: ({ focused }) =&gt; {
                              
                              const tintColortab = focused ? &quot;#006C35&quot;
                                  : &quot;#000000&quot;
                              return (
                                  &lt;Text style={{ color: tintColortab, fontSize: 8, fontFamily: &quot;Roboto-Bold&quot;, marginBottom: 6 }}&gt;{StringsOfLanguages.Favorite}&lt;/Text&gt;
                              )
                          },
                          tabBarIcon: ({ focused }) =&gt; {
                              const tintColortab = focused ? &quot;#006C35&quot;
                                  : &quot;#000000&quot;
                              return (
                                  &lt;Image source={require('../../../assets/images/TabBarIcons/ic_favorits_unselected/ic_favorite_unselected.png')}
                                      style={{ marginTop: 10, tintColor: tintColortab }}&gt;
                                  &lt;/Image&gt;
                              )
                          }
                      }}
                  &gt;        
                  &lt;/Tab.Screen&gt;
              &lt;/Tab.Navigator&gt;
          );
      }
  </code></pre>
  <p>And individual navigation is like :-</p>
  <pre><code>class HomeNavigator extends React.Component {
      render() {
          return (
              &lt;NavigationContainer independent={true}&gt;
                  &lt;Stack.Navigator&gt;
                      &lt;Stack.Screen name=&quot;Home&quot; component={Home} options={{ headerShown: false }} /&gt;
                      &lt;Stack.Screen name=&quot;AllRestuarent&quot; component={AllRestuarent} options={{ headerShown: false }} /&gt;
                      &lt;Stack.Screen name=&quot;AllLaundry&quot; component={AllLaundry} options={{ headerShown: false }} /&gt;
                      &lt;Stack.Screen name=&quot;AllEntertainment&quot; component={AllEntertainment} options={{ headerShown: false }} /&gt;
                      &lt;Stack.Screen name=&quot;Offer&quot; component={Offer} options={{ headerShown: false }} /&gt;
                      &lt;Stack.Screen name=&quot;ComponyMap&quot; component={ComponyMap} options={{ headerShown: false }} /&gt;
                  &lt;/Stack.Navigator&gt;
  
              &lt;/NavigationContainer&gt;
  
          );
      }
  }
  
  class FavouriteNavigator extends React.Component {
      render() {
          return (
              &lt;NavigationContainer independent={true}&gt;
                  &lt;Stack.Navigator&gt;
                      &lt;Stack.Screen name=&quot;Favorites&quot; component={Favorites} options={{ headerShown: false }} /&gt;
                      &lt;Stack.Screen name=&quot;Offer&quot; component={Offer} options={{ headerShown: false }} /&gt;
                      &lt;Stack.Screen name=&quot;ComponyMap&quot; component={ComponyMap} options={{ headerShown: false }} /&gt;
                  &lt;/Stack.Navigator&gt;
  
              &lt;/NavigationContainer&gt;
  
          );
      }
  }
  </code></pre>