title: React Native tab navigator re-render screen component
body: <p>Here is my code which implements a simple tab navigator. In one of the screens I need to make a request to an API and update the states every time the screen is selected by user via the tab navigator. As shown below the <code>componentDidMount</code> is not executed after first time (Second attempt fails on execution).</p>
  <pre><code>export default class UserAccount extends Component {
  
      constructor(props) {
          super(props)
  
          this.state = {
              sample:''
          }
      }
  
      componentDidMount = async () =&gt; {
  
         // Api fetch 
         // ...
  
         await this.setState({sample: api.response})
  
      }
  
      render() {
          return (
              ...
          )
      }
  }
  
  </code></pre>
  <p>And the tab navigator is:</p>
  <pre><code>&lt;Tab.Navigator&gt;
      &lt;Tab.Screen options={{
          tabBarIcon: ({ focused }) =&gt; (
              &lt;MaterialIcons name=&quot;home&quot; color={focused ? activeTintLabelColor : inactiveTintLabelColor} size={23} /&gt;
          ),
      }} name=&quot;Home&quot; component={Home} /&gt;
      &lt;Tab.Screen options={{
          tabBarIcon: ({ focused }) =&gt; (
              &lt;FontAwesome5 name=&quot;wallet&quot; color={focused ? activeTintLabelColor : inactiveTintLabelColor} size={20} /&gt;
          )
      }} name=&quot;Wallets&quot; component={UserWallets} /&gt;
      
  &lt;/Tab.Navigator&gt;
  </code></pre>
  <p>What should I do to let the tab navigator re-renders the screen component which causes the execution of <code>componentDidMount</code>?</p>
  <p>Regards.</p>