In my component ContactList
, I have rendered sone items using a map. Each item contains a thumbnail. When I click on the thumbnail, I want to navigate to a new screen called UserDetailsScreen
. While I navigate, I also want to transfer data to the next screen about the particular user whose thumbnail was clicked on.
Modals don't work properly since multiple modals will open if I used it in a map. So I am trying to use react-navigation.
ContactList.tsx:
export const ContactList: React.FunctionComponent<UserProps> = ({
data,
onDeleteContact,
}) => {
const [isUserVisible, setIsUserVisible] = useState(false);
//const [visibleUser, setVisibleUser] = useState<any>();
const navigation = useNavigation();
return (
<View style={styles.users}>
{data.users.nodes[0].userRelations.map(
(item: { relatedUser: RelatedUser; id: number }) => {
const numberOfFriends = item.relatedUser.userRelations.length;
const numberPlate = 'WHV AB 123';
return (
<View style={styles.item} key={item.id}>
{/* <TouchableOpacity onPress={() => setIsUserVisible(true)}> */}
<TouchableOpacity
onPress={() =>
navigation.navigate('UserDetailsScreen', {
firstName: item.relatedUser.firstName,
rating: item.relatedUser.rating,
numberOfFriends: numberOfFriends,
onDeleteContact: onDeleteContact,
isUserVisible: isUserVisible,
setIsUserVisible: setIsUserVisible,
numberPlate: numberPlate,
navigation: navigation,
})
}>
<Thumbnail
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
{/* <UserDetails
firstName={item.relatedUser.firstName}
rating={item.relatedUser.rating}
numberOfFriends={numberOfFriends}
onDeleteContact={onDeleteContact}
isUserVisible={isUserVisible}
setIsUserVisible={setIsUserVisible}
numberPlate={numberPlate}>
</UserDetails> */}
</View>
);
},
)}
</View>
);
};
UserDetailsScreen:
type UserProps = {
//data: UsersQueryHookResult,
firstName: string;
rating: number;
numberOfFriends: number;
numberPlate: string;
onDeleteContact: (id: number) => void;
navigation: any;
};
export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({
firstName,
rating,
numberOfFriends,
numberPlate,
onDeleteContact,
navigation,
// isUserVisible,
// setIsUserVisible,
}) => {
//const navigation = useNavigation();
const fName = navigation.getParam('firstName')
return (
// <Modal visible={isUserVisible}>
<View style={styles.container}>
<View>
<TouchableOpacity
style={styles.cross}
//onPress={() => setIsUserVisible(false)}>
onPress={() => navigation.navigate('Whitelist')}>
<Thumbnail></Thumbnail>
</TouchableOpacity>
</View>
<View style={styles.searchLocationContainer}>
<UserInfoContainer
firstName={firstName}
rating={rating}
numberPlate={numberPlate}
numberOfFriends={numberOfFriends}></UserInfoContainer>
</View>
</View>
// </Modal>
);
};
Additionally, when I click on the thumbnail from this screen, I should go back to my previous screen such that I can click on another object now.
For now, I keep getting an error that navigation.getParam
is undefined. How can I fix this?
I believe I need to pass the route
props but I'm not sure how to use them and whether I should pass them in both screens or one
get data from route props
like
type UserProps = {
//data: UsersQueryHookResult,
firstName: string;
rating: number;
numberOfFriends: number;
numberPlate: string;
onDeleteContact: (id: number) => void;
navigation: any;
route: any;
};
export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({
firstName,
rating,
numberOfFriends,
numberPlate,
onDeleteContact,
navigation,
route,
// isUserVisible,
// setIsUserVisible,
})....
route.params.firstName
if you can navigate to UserDetailsScreen
then you don't need to pass any route. because navigation and it's property are set with UserDetailsScreen
Your method of passing the params to UserDetailsScreen is correct.
In the previous version of react-navigation(1.x to 4.x) you can get params in "navigation.state.params".
In react-navigation 5 they have changed its implementation. Now you can get params passed to your screen or component in "route.params" Object. You can check the code for reference below.
type UserProps = {
route: any,
navigation: any,
};
export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({
route,navigation
}) => {
const {
firstname,
rating,
numberOfFriends,
numberPlate,
onDeleteContact,
} = route.params;
return (
<View style={styles.container}>
<View>
<TouchableOpacity
style={styles.cross}
//onPress={() => setIsUserVisible(false)}>
onPress={() => navigation.navigate('Whitelist')}>
<Thumbnail />
</TouchableOpacity>
</View>
<View style={styles.searchLocationContainer}>
<UserInfoContainer
firstName={firstName}
rating={rating}
numberPlate={numberPlate}
numberOfFriends={numberOfFriends}
/>
</View>
</View>
);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.