React Native Project Structure Issue - reactjs

Question

I’ve just started using react native and expo and I’ve been restructuring folders over and over again because I run into multiple errors where a js file can’t find an image that’s located under ./asses/navigation/the_image.png. The only time I got it to work was having all the js files within the App.js and have the App.js located under “./” and the pictures in the same location.
This is what the error looks like: error
And this is what my project structure looks like: project structure
What’s the proper way to structure my project and how can I get files such as my profile.js to find images in assets?
Code for messages.js:
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { Image, StyleSheet, TouchableOpacity, View, TextInput } from 'react-native';
export default function messages({ navigation })
{
const [filtertext, setfilter] = useState('');
return(
<View style={styles.home_container}>
<View style={styles.home_background}>
<TextInput
style= {styles.filter}
placeholder= "Search"
placeholderTextColor= "#96a7af"
onChangeText={filtertext => setfilter(filtertext)}
defaultValue={filtertext}
/>
<Image source= {require ('./assets/navigation/3_Elements_Circled_Navigation_Message_On.png')}/>
<TouchableOpacity onPress={() =>navigation.navigate('Home')} style={styles.home_button}>
<Image source= {require ('./assets/buttons/new_message_icon.png')} style={styles.new_msg_buton}/>
</TouchableOpacity>
<TouchableOpacity onPress={() =>navigation.navigate('Profile')} style={styles.profile_button}>
<Image source= {require ('./assets/buttons/profile_icon.png')}/>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create(
{
new_msg_buton:
{
position:'absolute',
height: 60,
width: 60,
top: -696,
left: 129,
},
filter:
{
position: 'absolute',
height: 54,
width: 275,
top: -660,
left: 19,
paddingLeft: 20,
borderColor: 'black',
borderRadius: 23,
borderTopWidth: 3,
borderBottomWidth: 3,
borderLeftWidth: 3,
borderRightWidth: 3,
}
})

Answer 1

Using ./ refers to the current directory the file is located in
Using ../dir_onelevel_above refers to the dir_onelevel_above as you've gone one level above in the folder structure.
That being said, your should need ../assets/navigation/icon.png to access the image from messages.js