React Native - FlatList not rendering images and Text - react-native

Question

I'm doing a welcome flatlist for the first-time users, I have an image and text to be shown, but it does not render any image, what am I doing wrong? When I put the path in the View it works, but when I put in the imagePath it shows a blank screen
import React from 'react';
import {
View,
Text,
Image,
TouchableOpacity,
FlatList,
} from 'react-native';
import ProgressCircle from 'react-native-progress-circle';
import Icon from 'react-native-vector-icons/AntDesign';
import {SafeAreaView} from 'react-native-safe-area-context';
import {TextInput, Button} from 'react-native-paper';
import styles from './styles';
import {blue} from 'chalk';
<FlatList
horizontal={true}
data={onboardingList}
renderItem={this.Welcome}
keyExtractor={(item, index) => index.toString()}
/>;
const onboardingList = [
{
screenText1: 'Get weekly overviews and find',
screenText2: 'out whats impacting your health',
screenText3: 'and wellness.',
imagePath: require('../../assets/images/wellbeing.png'),
nextScreen: 'HabitTracking',
progressCirclePercentage: 20,
},
{
screenText1: 'Explore healthyroutines and get',
screenText2: 'reminders to stay motivated along',
screenText3: 'the way.',
imagePath: require('../../assets/images/HabitTracking.png'),
nextScreen: 'Recommendation',
progressCirclePercentage: 40,
},
];
const Welcome = (item, navigation) => {
return (
<View style={styles.container}>
<View>
<Image source={item.imagePath} style={styles.image} />
</View>
<View style={styles.text_field}>
<Text style={styles.textContent}>{item.screenText1}</Text>
<Text style={styles.textContent}>{item.screenText2}</Text>
<Text style={styles.textContent}>{item.screenText3}</Text>
</View>
<View style={styles.footer}>
<TouchableOpacity onPress={() => navigation.navigate(item.nextScreen)}>
<ProgressCircle
percent={item.progressCirclePercentage}
radius={30}
borderWidth={2}
color="#3399FF"
shadowColor="white"
bgColor={'white'}>
<Icon name="arrowright" size={25} color="black"></Icon>
</ProgressCircle>
</TouchableOpacity>
</View>
</View>
);
};
export default Welcome;
Bonus question, the progressCircle is not getting the numbers I'm giving on progressCirclePercentage

Answer 1

Found the solution, the problem was on my View, I was using item.screenText and it should be only screentext
<View style={styles.container}>
<View>
<Image source={imagePath} style={styles.image} />
</View>
<View style={styles.text_field}>
<Text style={styles.textContent}>{screenText1}</Text>
<Text style={styles.textContent}>{screenText2}</Text>
<Text style={styles.textContent}>{screenText3}</Text>
</View>
<View style={styles.footer}>
<TouchableOpacity onPress={() => handleModal(2)}>
<ProgressCircle
percent={progressCirclePercentage}
radius={30}
borderWidth={2}
color="#3399FF"
shadowColor="white"
bgColor={'white'}>
<Icon name="arrowright" size={25} color="black"></Icon>
</ProgressCircle>
</TouchableOpacity>
</View>
</View>