Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Getting an image from route.paramns in react native

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading