Im having error on adding on press function for my flatlist grid. I would like to navigate from memberlist screen to memberDetails screen when i press or click the picture in memberlist container. And also i would like to navigate from memberlist screen to upload receipt screen when i press or click the upload button in memberlist container. Below is my code.Do help me out as im still new to react native.
Memberlist.js Member Details Image
import React from 'react';
import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import { SearchContainer, SearchInput, SearchIcon, SearchIconContainer, MemberListImage} from './styles';
import { FontAwesome5 } from '@expo/vector-icons';
import Member from './Member';
export const SearchBarCell = () => {
const [text, onChangeText] = React.useState(null);
return (
<SearchContainer>
<SearchInput
onChangeText={onChangeText}
value={text}
placeholder="Search"
/>
<SearchIconContainer activeOpacity={0.8} onPress={undefined}>
<SearchIcon name="search"/>
</SearchIconContainer>
</SearchContainer>
);
};
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}
listKey={(item, index) => index.toString()}
keyExtractor={(item, index) => index.toString()}
renderItem={ ( { item } ) => (<Member member={item}/>)}>
</FlatList>
);
}
MemberDetails.js Member Details Image
import React from 'react';
import { UploadReceiptContainer , UploadInput, UploadIconContainer, UploadReceiptIcon1} from './styles';
import MemberInformation from './MemberInfo';
import MemberSocialLink from './MemberSocialMedia';
import CompanyInformation from './CompanyInfo';
import Portfolio from './CompanyPortfolio';
import { FlatList, Text, View } from 'react-native';
export const MemberUploadCell = () => {
return (
<UploadReceiptContainer>
<UploadIconContainer>
<UploadReceiptIcon1 name="receipt"/>
<UploadInput>Upload Receipt
</UploadInput>
</UploadIconContainer>
</UploadReceiptContainer>
);
}
export const MemberInfo = () => {
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 MemberInfo1 = [
{ title: "Triple R Rewards Resources", address: "24A, Jalan BP 6/6 Bandar Bukit Puchong Puchong 47100 Selangor Malaysia", memberdetailImage: StaticMemberListImage, picname: "PIC Name: Rajiv Rathakrishnan", emailaddress: "Email: [email protected]", contactnumber: "Contact: 0125787414"}
];
return (
<FlatList
data={MemberInfo1}
keyExtractor={(item, index) => index.toString()}
listKey={(item, index) => index.toString()}
renderItem={ ( { item } ) => (<MemberInformation memberinformation={item}/>)}>
</FlatList>
);
}
UploadReceipt.js Upload Receipt Image
import React from 'react';
import {GrayScrollView, EventTitle} from './../components/styles';
import {ReceiptUploadConAlign, ReceiptUploadCon, UploadTitle, NameCompany, NameCompany1, ReceiptNumber, ReceiptNumberContainer, ReceiptNumberInput, DateReceipt, DateReceiptContainer, DateReceiptInput, AmountTotal, AmountTotalContainer, AmountTotalInput, ReceiptAttachment, ReceiptAttachment1, ReceiptAttachmentContainer, ReceiptAttachmentInput, BrowseContainer, FolderIcon, BrowseTitle, SubmitReceiptContainer, SubmitTitle, ResetReceiptContainer, ResetTitle, SubmitReceiptContainerAlign} from '../components/styles';
import { HeaderBar2 } from '../components/HeaderBar';
const UploadReceipt1 = () => {
const [text, onChangeText] = React.useState(null);
const [number, onChangeNumber] = React.useState(null);
return (
<GrayScrollView contentContainerStyle={{justifyContent: 'center'}}>
<HeaderBar2/>
<EventTitle> Upload Receipt </EventTitle>
<ReceiptUploadConAlign>
<ReceiptUploadCon>
<UploadTitle> Upload Receipt </UploadTitle>
<NameCompany> Member Company Name </NameCompany>
<NameCompany1> Triple R Rewards Resources </NameCompany1>
<ReceiptNumber> Receipt No </ReceiptNumber>
<ReceiptNumberContainer>
<ReceiptNumberInput
onChangeText={onChangeText}
value={text}
placeholder="ER586952"
/>
</ReceiptNumberContainer>
<DateReceipt> Date of Receipt</DateReceipt>
<DateReceiptContainer>
<DateReceiptInput
onChangeText={onChangeText}
value={text}
placeholder="dd/mm/yy"
/>
</DateReceiptContainer>
<AmountTotal> Receipt Total Amount </AmountTotal>
<AmountTotalContainer>
<AmountTotalInput
onChangeText={onChangeNumber}
value={number}
placeholder="0.00"
keyboardType="numeric"
/>
</AmountTotalContainer>
<ReceiptAttachment>Attach Receipt file size</ReceiptAttachment>
<ReceiptAttachment1>1MB and PNG, JPEG (MAXIMUM 4 IMAGES SHOWING DIFFERENT WALL ANGLE)</ReceiptAttachment1>
<ReceiptAttachmentContainer>
<ReceiptAttachmentInput
onChangeText={onChangeText}
value={text}
placeholder="Select file..."
/>
<BrowseContainer>
<FolderIcon name="folder-outline"/>
<BrowseTitle>Browse</BrowseTitle>
</BrowseContainer>
</ReceiptAttachmentContainer>
<SubmitReceiptContainerAlign>
<SubmitReceiptContainer>
<SubmitTitle>Submit
</SubmitTitle>
</SubmitReceiptContainer>
<ResetReceiptContainer>
<ResetTitle>Reset
</ResetTitle>
</ResetReceiptContainer>
</SubmitReceiptContainerAlign>
</ReceiptUploadCon>
</ReceiptUploadConAlign>
</GrayScrollView>
);
}
export default UploadReceipt1;
CodePudding user response：
First you have to use navigation and register all the screens with navigation (if you haven't done). You can use this two packages:
@react-navigation/native
@react-navigation/stack
Use navigate method to navigate to specific screen. for example: navigation.navigate('Detail')
check this Demo It will be helpful.