Skip to content

The card component which has a motion of flip for React Native(Android/iOS) with gestures

License

Notifications You must be signed in to change notification settings

arunahuja94/react-native-flip-card-plus

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-flip-card-plus

The card component which has a motion of flip for React Native(Android/ios) with gestures

Installation

npm i react-native-flip-card-plus

Look and feel

Once you're up and running

Product: demo Product: demo

Usage with single card

import React, { Component } from 'react';
import {
  Text,
  View,
  Button,
  StyleSheet,
  TouchableOpacity,
  Pressable,
} from 'react-native';
import FlipCard from "react-native-flip-card-plus";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.card = React.createRef();
  }

  render() {
    return (
      <View style={styles.container}>
        <FlipCard
          flipDirection={"h"}
          style={styles.cardContainer}
          ref={(card) => (this.card = card)}
          onFlipStart={() => console.log('onFlipStart')}
          onFlipEnd={() => console.log('onFlipEnd')}>
          <Pressable
            style={styles.card}
            onLongPress={() => alert('onLongPress')}>
            <Text style={styles.label}>FRONT</Text>
          </Pressable>
          <Pressable style={styles.card} onPress={() => alert('onPress')}>
            <Text style={styles.label}>BACK</Text>
          </Pressable>
        </FlipCard>
        <View style={styles.manualTriggers}>
          <Pressable
            style={styles.trigger}
            onPress={() => this.card.flipHorizontal()}>
            <Text style={{ color: 'white' }}>Horizontal</Text>
          </Pressable>
          <Pressable
            style={styles.trigger}
            onPress={() => this.card.flipVertical()}>
            <Text style={{ color: 'white' }}>Vetical</Text>
          </Pressable>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  cardContainer: {
    width: 220,
    height: 270,
  },
  card: {
    width: 220,
    height: 270,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FE474C',
    borderRadius: 5,
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
  },
  label: {
    textAlign: 'center',
    fontSize: 25,
    fontFamily: 'System',
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
  manualTriggers: {
    flexDirection: 'row',
  },
  trigger: {
    backgroundColor: 'black',
    margin: 20,
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5,
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
  },
});


Usage with multiple cards (MAP)

import React, { Component } from 'react';
import { Text, View, Button, StyleSheet, Pressable } from 'react-native';
import FlipCard from "react-native-flip-card-plus";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.multiCardRef = [];
    this.state = {
      cards: ['CARD1', 'CARD2'],
    };
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.cards.map((item, index) => {
          return (
            <>
              <FlipCard
                flipDirection={'h'}
                style={styles.cardContainer}
                onFlipStart={() => console.log('onFlipStart')}
                onFlipEnd={() => console.log('onFlipEnd')}
                ref={(card) => (this.multiCardRef['card' + index] = card)}>
                <Pressable
                  style={styles.card}
                  onLongPress={() => alert('onLongPress')}>
                  <Text style={styles.label}>{item} Front</Text>
                </Pressable>
                <Pressable style={styles.card} onPress={() => alert('onPress')}>
                  <Text style={styles.label}>{item} Back</Text>
                </Pressable>
              </FlipCard>
              <View style={styles.manualTriggers}>
                <Pressable
                  style={styles.trigger}
                  onPress={() =>
                    this.multiCardRef['card' + index].flipHorizontal()
                  }>
                  <Text style={{ color: 'white' }}>Horizontal</Text>
                </Pressable>
                <Pressable
                  style={styles.trigger}
                  onPress={() =>
                    this.multiCardRef['card' + index].flipVertical()
                  }>
                  <Text style={{ color: 'white' }}>Vetical</Text>
                </Pressable>
              </View>
            </>
          );
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  cardContainer: {
    width: 220,
    height: 270,
  },
  card: {
    width: 220,
    height: 270,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FE474C',
    borderRadius: 5,
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
  },
  label: {
    textAlign: 'center',
    fontSize: 25,
    fontFamily: 'System',
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
  manualTriggers: {
    flexDirection: 'row',
  },
  trigger: {
    backgroundColor: 'black',
    margin: 20,
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5,
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
  },
});


props

Props type description required default
style object container style {}
duration number flip duration 1000
flipZoom number zoom level on flip 0.09
flipDirection string 'h' or 'v' if swipeable 'h'
perspective number 800
flipHorizontal function Flip horizontal trigger
flipVertical function Flip vertical trigger
swipeable bool enable/disable gesture swipe true

events

Props type description
onFlipStart func function to be called when the flip-animation starts. it receives the card-sides index
onFlipEnd func function to be called when the flip-animation ends. it receives the card-sides index

Credits

Inspired by react-native-card-flip

About

The card component which has a motion of flip for React Native(Android/iOS) with gestures

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published