title: onPress not working in React Native Flatlist
body: <p>My onPress handler is not working when someone clicks on Flatlist item.</p>
  <p>Video of this issue
  <a href="https://u.pcloud.link/publink/show?code=XZWGOUkZmDLPeKQOQJJzxnqFB8Q21X3acT7k" rel="nofollow noreferrer">https://u.pcloud.link/publink/show?code=XZWGOUkZmDLPeKQOQJJzxnqFB8Q21X3acT7k</a></p>
  <p>Here is the code:</p>
  <hr />
  <pre><code>import React, { useState, useEffect } from 'react';
  
  import { View, Text, Image, FlatList, ActivityIndicator } from 'react-native';
   
   
  
  import { TouchableNativeFeedback } from 'react-native-gesture-handler';
  
  import axios from 'axios';
   
  export default function _AjaxApp() {
  
      const [postList, setPostList] = useState([]);
      const [currentPage, setCurrentPage] = useState(1);
      const [isLoading, setIsLoading] = useState(false);
  
  
      const loadData = (append = false) =&gt; {
          let url = &quot;https://edristi.in/wp-json/wp/v2/posts?per_page=20&amp;page=&quot; + currentPage;
          setIsLoading(true);
          setCurrentPage(currentPage + 1);
          axios.get(url).then((r) =&gt; {
              if (append) {
                  setPostList(postList.concat(r.data));
              } else {
                  setPostList(r.data);
              }
              setIsLoading(false);
          }).catch((e) =&gt; {
              console.log(e);
          });
      }
  
      useEffect(() =&gt; {
          loadData();
      }, [])
  
      let Loader = &lt;&gt;&lt;/&gt;
      if (isLoading) {
          Loader = &lt;ActivityIndicator&gt;&lt;/ActivityIndicator&gt;
      }
  
      return (
          &lt;View&gt;
            &lt;View style={{padding:20, backgroundColor:&quot;#4342fe&quot;}}&gt;
            &lt;Text style={{color:&quot;white&quot;}}&gt;Edristi App&lt;/Text&gt;
            &lt;/View&gt;
  
              &lt;FlatList
                  data={postList}
                  renderItem={({ item, index, separators }) =&gt; &lt;PostCard  postList={postList} {...item} index={index} /&gt;}
                  keyExtractor={r =&gt; r.id + &quot;-&quot; + Math.random().toString()}
                  removeClippedSubviews={true}
                  maxToRenderPerBatch={2}
                  ListFooterComponent={Loader}
                  onEndReachedThreshold={0.5}
                  onEndReached={() =&gt; {
                      loadData(true);
                  }}
              /&gt;
  
  
          &lt;/View&gt;
      );
  }
  
  
  
  class PostCard extends React.PureComponent {
  
  
      onPressHandler() {
          console.log(&quot;Clicked&quot;);
          alert(&quot;Clicked&quot;);
   
      }
  
  
  
      render() {
  
          let image = &lt;&gt;&lt;/&gt;
          if (this.props.jetpack_featured_media_url.trim() !== &quot;&quot;) {
              image = &lt;Image style={{ flex: 1 }} source={{
                  //uri: this.props.featuredimage,
                  uri: this.props.jetpack_featured_media_url,
              }} /&gt;
          }
          //  console.log(this.props.jetpack_featured_media_url);
  
  
          return &lt;TouchableNativeFeedback onPress={()=&gt;{
            this.onPressHandler();
          }}&gt;
  
              &lt;View style={{ margin: 10 }}&gt;
                 
                      &lt;Text style={{ fontSize: 17, lineHeight: 23, fontWeight: &quot;600&quot; }}&gt;{ this.props.title.rendered}&lt;/Text&gt;
                      
                
              &lt;/View&gt;&lt;/TouchableNativeFeedback&gt;
  
   
      }
  }
  </code></pre>