Passing Data to Screen from FlatList Component

user_9322777 0
Viewed 709

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?

react-native-flatlist react-navigation react-native
2 Answers

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
  })
}
user_23120510

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;
}
user_95972960
Related