onPress not working in React Native Flatlist My onPress handler is not working when someone clicks on Flatlist item.
Video of this issue
https://u.pcloud.link/publink/show?code=XZWGOUkZmDLPeKQOQJJzxnqFB8Q21X3acT7k
Here is the 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) => {
let url = "https://edristi.in/wp-json/wp/v2/posts?per_page=20&page=" + currentPage;
setIsLoading(true);
setCurrentPage(currentPage + 1);
axios.get(url).then((r) => {
if (append) {
setPostList(postList.concat(r.data));
} else {
setPostList(r.data);
}
setIsLoading(false);
}).catch((e) => {
console.log(e);
});
    }

    useEffect(() => {
loadData();
    }, [])

    let Loader = <></>
    if (isLoading) {
Loader = <ActivityIndicator></ActivityIndicator>
    }

    return (
<View>
<View style={{padding:20, backgroundColor:"#4342fe"}}>
<Text style={{color:"white"}}>Edristi App</Text>
</View>

<FlatList
data={postList}
renderItem={({ item, index, separators }) => <PostCard  postList={postList} {...item} index={index} />}
keyExtractor={r => r.id + "-" + Math.random().toString()}
removeClippedSubviews={true}
maxToRenderPerBatch={2}
ListFooterComponent={Loader}
onEndReachedThreshold={0.5}
onEndReached={() => {
loadData(true);
}}
/>


</View>
    );
}



class PostCard extends React.PureComponent {


    onPressHandler() {
console.log("Clicked");
alert("Clicked");
 
    }



    render() {

let image = <></>
if (this.props.jetpack_featured_media_url.trim() !== "") {
image = <Image style={{ flex: 1 }} source={{
//uri: this.props.featuredimage,
uri: this.props.jetpack_featured_media_url,
}} />
}
//  console.log(this.props.jetpack_featured_media_url);


return <TouchableNativeFeedback onPress={()=>{
this.onPressHandler();
}}>

<View style={{ margin: 10 }}>

<Text style={{ fontSize: 17, lineHeight: 23, fontWeight: "600" }}>{ this.props.title.rendered}</Text>


</View></TouchableNativeFeedback>

 
    }
}


Try to import 'TouchableNativeFeedback' from 'react-native' instead of 'react-native-gesture-handler'.