title: Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state
body: <p>When I clicked on the touchableopacity button to navigate to another screen within the same tab I got this warning and i cannot navigate. When I run I see the navigated page on my screen but on pressing tab redirects me to the same tab and still, the buttons don't work</p>
  <p>I made stack navigator and tab navigator and merged both of them. but using <code>this.props.navigation.navigate(&quot;checkout&quot;)</code> don't work</p>
  <pre><code>&lt;View style={{ flexDirection:'column', alignItems:'center' }}&gt;
     &lt;TouchableOpacity 
        activeOpacity = { .5 } 
        onPress{ this.props.navigation.navigate('CatWise') }
     &gt;
        &lt;Image style={{ height:35,width:35,resizeMode:&quot;cover&quot; }} source={ require('../assets/cat_image.png') }/&gt;
        &lt;Text&gt;Electronics&lt;/Text&gt;
     &lt;/TouchableOpacity&gt;
  &lt;/View&gt;
  </code></pre>
  <p>I expect that after I click on that <code>TouchableOpacity</code> it should redirect me to the catwise screen. \</p>
  <p>Warning:</p>
  <pre><code>Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
  </code></pre>