lhandel / react-native-card-stack-swiper

Tinder like react-native card stack swiper
MIT License
421 stars 127 forks source link

How to flip the card #6

Closed sheetalsuryan closed 6 years ago

sheetalsuryan commented 6 years ago

is it possible to add flip feature this library, trying to add flipview in card but its flipping, could please help me to solve the same

lhandel commented 6 years ago

I don't think a flip feature fits in this module but you can combine react-native-card-flip with this module. Like shown below

<CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
          <CardFlip style={[styles.cardContainer]} ref={(card) => this.card = card} >
            <TouchableOpacity activeOpacity={1} style={[styles.card, styles.card1]} onPress={() => this.card.flip()} ><Text style={styles.label}>AB</Text></TouchableOpacity>
            <TouchableOpacity activeOpacity={1} style={[styles.card, styles.card2]} onPress={() => this.card.flip()} ><Text style={styles.label}>CD</Text></TouchableOpacity>
          </CardFlip>
          <CardFlip style={[styles.cardContainer]} ref={(card) => this.card2 = card} >
            <TouchableOpacity activeOpacity={1} style={[styles.card, styles.card1]} onPress={() => this.card2.flip()} ><Text style={styles.label}>AB</Text></TouchableOpacity>
            <TouchableOpacity activeOpacity={1} style={[styles.card, styles.card2]} onPress={() => this.card2.flip()} ><Text style={styles.label}>CD</Text></TouchableOpacity>
          </CardFlip>
</CardStack>