React Native Images FlatList Error "doesn't show the images" - react-native

Question

enter image description here
I relied on this video, here's the github with the video code:
https://github.com/KasperKloster/ComponentsExplained/blob/main/App.js
https://www.youtube.com/watch?v=qGN3S0wO-OQ
i'm not getting to view the icon images in png and neither in svg, could they help me? I put a bacgroundColor in some random color just to see if the icons are there, and they are, only they are not showing up.. i also couldn't put logout at the bottom of the screen
Settings.js
import { SafeAreaView,Text, View, FlatList,
TouchableOpacity, StyleSheet, Image} from 'react-native';
import React, {useState} from 'react'
const Settings = () => {
const [data, setdata] = useState(DATA);
const [isRender, setisRender] = useState(false);
const DATA = [
{id: 1, text: 'Perfil', image: require('../../assets/images/user.png')},
{id: 2, text: 'Dark/Light mode', image: require('../../assets/images/light-up.png')},
{id: 3, text: 'TouchId', image: require('../../assets/images/fingerprint.png')},
{id: 4, text: 'Logout'},
]
const renderItem = ({item}) => {
return(
<TouchableOpacity
style= {styles.item}
>
<View style={ styles.avatarContainer }>
<Image loadingIndicatorSource={ item.image } style={ styles.avatar } />
</View>
<View>
<Text style={styles.text}>{item.text}</Text>
</View>
</TouchableOpacity>
)
}
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
keyExtractor={(item) => item.id.toString()}
renderItem={renderItem}
extraData={isRender}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20
//marginHorizontal: 21
},
item:{
borderBottomWidth: 1,
borderBottomColor: '#808080',
alignItems: 'flex-start',
flexDirection: 'row',
},
avatarContainer: {
backgroundColor: '#A0D800',
borderRadius: 100,
height: 30,
width: 30,
justifyContent: 'center',
alignItems: 'center',
},
avatar: {
height: 50,
width: 50,
},
text:{
marginVertical: 30,
fontSize: 25,
fontWeight: 'bold',
marginLeft: 30,
marginBottom: 5
},
});
export default Settings;

Answer 1

change loadingIndicatorSource={ item.image } to source={ item.image }