Flatlist simulating different pages - react-native

Question

I have to build 5 pages but as they have all the same layout I want to use a flatlist to populate the fields, my doubt us vary basic, I read the documentation and had problems to fully understand, here is my code
const DATA = [
{
picture: '../../Components/Images/wellbeing.png',
text1: 'Get weekly overviews and find',
text2: 'out whats impacting your health',
text3: 'and wellness',
percent: 20,
},
];
const Item = ({picture, text1, text2, text3, percent}) => (
<View style={styles.container}>
<View>
<Image source={require({picture})} style={styles.image} />
</View>
<View style={styles.text_field}>
<Text style={styles.textContent}> {text1} </Text>
<Text style={styles.textContent}> {text2} </Text>
<Text style={styles.textContent}> {text3} </Text>
</View>
<View style={styles.footer}>
<TouchableOpacity onPress={() => navigation.navigate('HabitTracking')}>
<ProgressCircle
percent={{percent}}
radius={30}
borderWidth={3}
color="#3399FF"
shadowColor="white"
bgColor="blue">
<Icon name="arrowright" size={25} color="white"></Icon>
</ProgressCircle>
</TouchableOpacity>
</View>
</View>
);
I'm having trouble on how to populate this in the class, here is what I have so far
const Wellcome = () => {
const renderItem = ({picture, text1, text2, text3, percent}) => (
<Item picture={Item.picture}
/>
);
return (
);
};
export default Wellcome;
am I doing everything wrong?
please let me know if you need any further information

Answer 1

const renderItem = (item) => (
<Item picture={item.picture} />
);
and call renderItem in your render method
...
{renderItem(item)}
...
where item looks something like...
{
picture: 'something',
text1: 'something',
text2: 'something',
text3: 'something',
percent: 'something'
}