How to add onPress navigation in grid flatlist?

Question

Im having an error on adding the Onpress function in my code. I want it like if i click the upload receipt container it will navigate to the upload receipt page and when i click the picture in flatlist grid it will navigate to member details page. Below is my code. Do help me out as im still new to react native.

export const MemberCell = ({navigation}) => {
    const StaticMemberListImage = "https://media.istockphoto.com/vectors/three-people-curved-teamwork-logo-vector-id1363080708?b=1&k=20&m=1363080708&s=170667a&w=0&h=HG6M1JLupChxFQvl8mzUCLCkKWxNwa09RscKJRWTfoU="
    const StaticMemberListImage1 = "https://scontent.fkul13-1.fna.fbcdn.net/v/t39.30808-6/277536553_4926823574070611_1982637994984559070_n.jpg?stp=cp0_dst-jpg_e15_fr_q65&_nc_cat=110&ccb=1-6&_nc_sid=9e2e56&_nc_ohc=XepHa0zDLokAX_CGPxz&_nc_ht=scontent.fkul13-1.fna&oh=00_AT8-ajKxUdWkKKhfTMlGVZHnDDboXBTiXA1k-4uffh53FA&oe=628303D8"
    const StaticMemberListImage2 = "https://cdn3.f-cdn.com/contestentries/1771882/42695517/5ec3817a4257a_thumb900.jpg"
    const StaticMemberListImage3 = "https://scontent.fkul16-1.fna.fbcdn.net/v/t1.6435-9/116880515_187714399437397_6195609452015735631_n.jpg?_nc_cat=105&ccb=1-6&_nc_sid=09cbfe&_nc_ohc=SFOqJafY0qYAX83mUrQ&_nc_ht=scontent.fkul16-1.fna&oh=00_AT-aRCE81LEG-3iYA7bNPQA6ifu_4ObgAjqVooB4i0MSBg&oe=62A3D80D"
    const StaticMemberListImage4 = "https://scontent.fkul16-1.fna.fbcdn.net/v/t1.6435-9/175052927_271800581342609_273555569106690317_n.png?_nc_cat=104&ccb=1-6&_nc_sid=174925&_nc_ohc=18UXeZc859gAX_jrq4p&_nc_ht=scontent.fkul16-1.fna&oh=00_AT-p88uwdCZTnMPRQL4b6_y4CG2PFBEFiWUgkzKlArrfIw&oe=62A212F8"
    const StaticMemberListImage5 = "https://scontent.fkul13-1.fna.fbcdn.net/v/t39.30808-6/276260909_298231979107455_7181712052572521945_n.jpg?stp=cp0_dst-jpg_e15_fr_q65&_nc_cat=100&ccb=1-6&_nc_sid=9e2e56&_nc_ohc=xFvdoZ0pZiMAX9vrQ7b&_nc_ht=scontent.fkul13-1.fna&oh=00_AT9lNiryIc68GvPNDp7W11rRXhFj1y0H-oE0NYmniUknPQ&oe=6282AD36"

    const members = [
    { receipt: "Receipt pts: RM1 = 3.00pts", membername: "Triple R Rewards Resource" , memberImage: StaticMemberListImage, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "Gwen Bridal Makeup", memberImage: StaticMemberListImage1, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "KV Physiotheraphy", memberImage: StaticMemberListImage2, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 5.00pts", membername: "LDSV Ventura Enterprise", memberImage: StaticMemberListImage3, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "May Kuen Heals", memberImage: StaticMemberListImage4, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "Amarjit Sran Trading", memberImage: StaticMemberListImage5, receiptUpload: "Upload receipt"},
];
    return (
        <FlatList 
        numColumns={2}
        data={members}
        keyExtractor={(item, index) => index.toString()}
        renderItem={ ( { item } ) => (<Member member={item}/>)}>
        </FlatList>
    );

}

The attached picture explains the whole scenario of the problem. I couldn't navigate to upload receipt page when i click the upload receipt purple button.

Answer 1

You need to pass onPress event.

export default function Member({member, onClick}) {
  return (
    <TouchableOpacity style={styles.container}
      onPress={onClick}>
      <Text style={styles.paragraph}>
        {member.membername}
      </Text>
      <Image style={styles.logo} source={{uri: member.memberImage}} />
    </TouchableOpacity>
  );
}


<FlatList
   numColumns={2}
   data={members}
   keyExtractor={(item, index) => index.toString()}
   renderItem={ ({item}) => (
       <Member member={item} 
        onClick={()=> {
              console.log('Item clicked')
        }} />
     )}
   />

Check this demo: flatlistDemo