I’m trying to make a profiles screen for my members of the group.
My idea is make just one font for the four screen using route params to set all informations, like this:

            <TouchableOpacity style={styles.ident1} onPress={() => navigation.navigate('Profile', {
                Nome: 'Ângelo J. da Rosa', Resto: ['19 Anos', 'Cocal do Sul - SC'], Foto: '../../assets/angelo.jpeg'
                })}>
                <Text style={{ fontSize: 20,fontWeight: 'bold' }}>Angelo</Text>
            </TouchableOpacity>

but when I am trying to get the image from the folder using the path that I got from the paramns (Foto), i get an error and not know how to proceed

my screen font:

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

export default function Profile({ route, navigation }) {
    const { Nome, Resto, Foto } = route.params;

    return (
        <View style={styles.container}>

            <Image
                style={styles.image}
                source={require({Foto})}
            />
            <Text style={[styles.headline]}>{"\n"}{Nome}</Text>

            <View style={[styles.views, styles.ident1]}>,
                <Text style={[styles.desc]}>{Resto[0]}</Text>
                <Text style={[styles.desc]}>{Resto[1]}</Text>
                <Text style={[styles.desc]}>{Resto[2]}</Text>
                <Text style={[styles.desc]}>{Resto[3]}</Text>
                <Text style={[styles.desc]}>{Resto[4]}</Text>
             </View>
        </View>
    )
};

>Solution :

You are doing one mistake while passing the image path. You can follow the below code :

    Foto: require('../../assets/angelo.jpeg')
            

And use it as a prop like this :

<Image source={Foto}/>

It will work surely . If not please ping me I will surely help.

NOTE : For more information please refer this : Load image passed as props react native