CODEWITHSUNDEEP
react-nativenative-base
Guilherme Luersen
Guilherme Luersen

Reputation: 33

How to add onPress events on Cards (on native base)?

I'm trying to make those cards clickable to redirect to another screen, but I cant figure it out 

 let cards = this.state.items.map(item => (
            <Card key={item.id} onPress={() => Actions.dogScreen()}> 
                <CardItem bordered>
                    <Left>
                        <Thumbnail square source={item.image ? { uri: "data:image/jpeg;base64," + item.image } : logo} />
                        <Body>
                            <Text>Name: {item.name}, Age: {item.age}</Text>
                            <Text note>Gender: {item.gender.name} Race: {item.race.name}</Text>
                        </Body>
                    </Left>
                </CardItem>
            </Card>))

Upvotes: 3

Views: 7216

Answers (1)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93183

You can make <Card /> clickable by wrapping the whole card by TouchableOpacity. Also don't forget to add pointerEvents="none" for each card.

import { TouchableOpacity } from 'react-native';

let cards = this.state.items.map(item => (
     <TouchableOpacity key={item.id} onPress={() => Actions.dogScreen()}>         

          <Card pointerEvents="none"> 
                <CardItem bordered>
                    <Left>
                        <Thumbnail square source={item.image ? { uri: "data:image/jpeg;base64," + item.image } : logo} />
                        <Body>
                            <Text>Name: {item.name}, Age: {item.age}</Text>
                            <Text note>Gender: {item.gender.name} Race: {item.race.name}</Text>
                        </Body>
                    </Left>
                </CardItem>
            </Card>

       </TouchableOpacity>
))

Upvotes: 14

Related Questions