Passing Data to Screen from FlatList Component - react-native

Question

I created a custom component called AchievementBlock which is as follows:
import React from 'react';
import { View, StyleSheet, Image, TouchableOpacity } from 'react-native';
const AchievementBlock = ({ onPress }) => {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.AchievmentBlockStyle}>
<Image source={require('../../assets/images/Placeholder_Achievement.png')} />
</View>
</TouchableOpacity>
)
}
And used that component as a FlatList in my UserProfileScreen with a the following data:
const tournaments = [
{ title: 'Tournament Title #1', placement: '2nd', desc: 'Description Here', logo: require('../../assets/images/TournamentLogo.png') },
{ title: 'Tournament Title #2', placement: '1st', desc: 'Description Here', logo: require('../../assets/images/TournamentLogo.png') },
{ title: 'Tournament Title #3', placement: '3rd', desc: 'Description Here', logo: require('../../assets/images/TournamentLogo.png') },
]
I then return as follows:
return (
<View style={styles.container}>
<FlatList
data={tournaments}
numColumns={3}
keyExtractor={(tournaments) => {tournaments.title}}
renderItem={({ item }) => {
return (
<AchievementBlock
title={item.title}
placement={item.placement}
onPress={() => navigation.navigate('Achievement')}/>
)
}}
/>
</View>
)
Now I'm stuck on pulling through each rendered FlatList item's data to a new screen when clicking on it.
The on press would be something like this:
onPress={() => navigation.navigate('Achievement', {item.title, item.placement, item.logo, item.desc})}
But that doesn't work and with me still being a beginner with React Native I can't seem to find the solution in pulling each items data through to that screen with the navigation.getParam() function as normal.
What am I doing wrong and how would I achieve this in the best practice?

Answer 1

You're on the right path as React Navigation v5 uses the function
navigation.navigate
However the way you pass the key/value of item in the params argument is incorrect.
Try deconstructing with the following
onPress={
() => navigation.navigate('Achievement', { ...item })
}
or pass in the keys explicitly if you intend to set the keys/values
onPress={
() => navigation.navigate('Achievement', {
title: item.title,
logo: item.logo,
placement: item.placement,
desc: item.desc
})
}

Answer 2

Passing data through navigation
You can pass data with navigation as follows
onPress={
() => navigation.navigate('Achievement', {
name: item.name,
logo: item.logo,
})
}
Access data in next screen
export const Achievement = ({route}) => {
const name = route.params.name;
const logo = route.params.logo;
}