Get the image source from a react native <Image> component

Question

Is there a way for me to retrieve the image source uri "profileImage" from the image component and pass it to the function, profileImageFilter(), as 'image source'.

I want 'image source' to be the "uri: profileImage" value

<TouchableOpacity onPress={profileImageFilter('image source')}>
     <Image style={styles.profileimage} source={{uri: profileImage}}></Image>
</TouchableOpacity>

Ben Walton · Accepted Answer · 2021-09-01 17:47:47Z

1

If You have access to profile image in the render function then why don't you just past it to the function?

See example:

<View>

<TouchableOpacity onPress={() => profileImageFilter({uri: profileImage})}>
     <Image style={styles.profileimage} source={{uri: profileImage}}></Image>
</TouchableOpacity>

<TouchableOpacity onPress={() => profileImageFilter({uri: profileImage2})}>
     <Image style={styles.profileimage} source={{uri: profileImage2}}></Image>
</TouchableOpacity>

<TouchableOpacity onPress={() => profileImageFilter({uri: profileImage3})}>
     <Image style={styles.profileimage} source={{uri: profileImage3}}></Image>
</TouchableOpacity>

</View>

edited Sep 1, 2021 at 17:47

answered Sep 1, 2021 at 17:40

Ben Walton

4534 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Laszcz Over a year ago

Because there will be many images and I want to access this image's specific uri. For simplicity in the question there is one but I am trying to determine which one was clicked and pass its uri string onward

Ben Walton Over a year ago

@MattLaszcz See above it shouldn't matter how many Images there are... Just wrap each in it's own touchable and on press send that uri to the function. See edited code above.

Ben Walton Over a year ago

@MattLaszcz also, note I add () => to your onPress. You were calling the function onRender rather than waiting for the onPress event to fire in your example.

Matt Laszcz Over a year ago

oh ok! I was wondering if that's how it worked. So just by passing the URI it already knows it is that specific one for the image since its wrapped in the TouchableOpacity. Thanks!

Collectives™ on Stack Overflow

Get the image source from a react native <Image> component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related