clickable Flat list items in React Native - reactjs

Question

I have a flat list that displays a list of item, I would like to make each item clickable.
My render function looks like this, and it works without any issue, except that it is not clickable
render() {
return (
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={this.renderItem}
numColumns={numColumns}
/>
);
}
I have tried to do something similar to this but it is giving me an error, any idea what's wrong with my code?
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={({this.renderItem}) => (
<TouchableHighlight
onPress={() => console.log("hello")}>
</TouchableHighlight>
)}
numColumns={numColumns}
/>

Answer 1

You can do like this :
renderItem with TouchableOpacity. Make sure to import it from react native.
import { TouchableOpacity } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome5';
...
...
render() {
return (
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={({item ,index}) => (
<TouchableOpacity
key={index.toString()}
onPress={() => console.log("clicked")}
>
<Icon name={item} color="red"/>
</TouchableOpacity>
)}
numColumns={numColumns}
key={numColumns.toString()} // if you want to use dynamic numColumns then you have to use key props
/>
);
}

Answer 2

First you need to import Touchable Opacity and the error you are getting , make sure data you are passing to flatlist is an array. So check this :
<FlatList
data={formatData(data, numColumns)} // this should be an array , or array of objects
renderItem={({item ,index}) => (
<TouchableOpacity
onPress={() => console.log("hello")}
>
<Text>Hi</Text>
</TouchableOpacity>
/>
Hope its clear

Answer 3

This is how you can iterate inside FlatList itself.
Working live https://snack.expo.io/#akhtarvahid/flatlist-simple
<FlatList
data={formatData(data, numColumns)}
style={styles.container}
renderItem={({item ,index}) => (
<TouchableOpacity
key={index.toString()}
onPress={() => console.log('Clicked item')}>
<Text>{'Hello'}</Text>
</TouchableOpacity>
)}
numColumns={numColumns}
keyExtractor={item=>item.id}
/>