I’m not able to render Image with Image - React-Native

Asked

Viewed 216 times

-1

Sirs(s). When I write like that:

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Button title="Pick an image from camera roll" onPress={pickImage} /> {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>

me " Error while updating Property 'src' of a view Managed by:Rctimageview null Value for Uri cannot be cast from Readablenativemap to string"

if I write like this:

 <Button title="Pick an image from camera roll" onPress={pickImage} />                   
   {image !== '' ? <View>
    <Image source={{uri: image }} style={{ width: 200, height: 200 }} />
    </View>:null}

returned to me: 'Warning: Failed prop type:Invalid prop 'source' supplied to 'Image'

I may be wrong but I believe both are related to the source... but I don’t know how to fix.

a Uri:image comes from the function:

async function pickImage(){
    try {
        const result  =  await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        })
        if (!result.cancelled){
            setimage({image:result.uri})
            console.log(result.uri)
        }
    } catch (E) {
        console.log(E)

    }
}

console.log(result.Uri) is returning "file://data/user/0/host.exp.Exponent/cache/Experiencedata/%2540anonymous%252Fapp-bc4b4820-9594-491f-bfdb-cd2750d6f674/Imagepicker/905aa553-A340-4516-a4b5-4310ed91289e.jpg"

thank you in advance!!

react-native image expo uri

1 answer

0

was passing Uri the wrong way, where was:

setimage({image:result.uri})

it should be like this:

setimage(result.uri)

Browser other questions tagged react-native image expo uri

You are not signed in. Login or sign up in order to post.