CODEWITHSUNDEEP
javascriptreactjsreact-native
Musthafa
Musthafa

Reputation: 632

How to retrieve clicked image onPress react native

I have number of card components in which I'm rendering some images inside. What I'm trying to do is onPress of card retrieving the clicked image.

<TouchableOpacity
 onPress={this.viewProduct.bind(this)}
>
<Card>
    <CardItem cardBody>
       <Image source={require('../../assets/images/products/product_1.jpg')} style={{ height: 200, width: null, flex: 1 }} />
                    </CardItem>
                    <CardItem>
                        <Left>
                            <Button transparent>
                                <Text>₹3500</Text>
                            </Button>
                        </Left>
                        <Right>
                            <Button transparent>
                                <Text style={styles.offText}>50% off</Text>
                            </Button>
                  </Right>

   </CardItem>
</Card>
</TouchableOpacity>

I'm rendering the component inside a TouchableOpacity to make it as a clickable element and I have attached a function viewProduct as a event listner.

viewProduct = (item) => {
 console.log(`Selected image is ${item.uri}`);
}

But when I click the function I'm not getting the clicked Image. Is there anything I have to bind inside the function or how to retrieve the image onPress of Card.

Upvotes: 0

Views: 494

Answers (1)

Karan Wadhwa
Karan Wadhwa

Reputation: 86

youre directly giving it a source. you need to extract that into a separate obj and parse that as your image source check out this snippet: https://snack.expo.io/@karanwadhwa/stack-overflow-62977355

edit: updated above snack to use local files instead

Upvotes: 1

Related Questions