rein96/react-native-cards-swipe

Card Stack Swiper implemented with Reanimated 2 and React Native Gesture Handler

react-native-cards-swipe

Powerful React Native Card Stack Swiper

Preview

Installation

1. Install the react-native-cards-swipe package.

npm install react-native-cards-swipe

2. Then you'll need to install react-native-reanimated version >= 2.1.0 to your project.
3. Finally, you'll need to install react-native-gesture-handler to your project.

Usage

import React from 'react';
import { Image, StyleSheet, View } from 'react-native';

import CardsSwipe from 'react-native-cards-swipe';

const cardsData = [
  { src: require('./assets/images/1.jpg') },
  { src: require('./assets/images/2.jpg') },
  { src: require('./assets/images/3.jpg') },
  { src: require('./assets/images/4.jpg') },
];

export default function App() {
  return (
    <View style={styles.container}>
      <CardsSwipe
        cards={cardsData}
        cardContainerStyle={styles.cardContainer}
        renderCard={(card) => (
          <View style={styles.card}>
            <Image
              style={styles.cardImg}
              source={card.src}
            />
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardContainer: {
    width: '92%',
    height: '70%',
  },
  card: {
    width: '100%',
    height: '100%',
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 8,
    },
    shadowOpacity: 0.07,
    shadowRadius: 3.3,
  },
  cardImg: {
    width: '100%',
    height: '100%',
    borderRadius: 13,
  },
});

CardsSwipe props

Props	type	description	required	default
cards	array	data for the cards	yes
renderCard	func	renders the card with the current data	yes
initialIndex	number	initial card index		0
containerStyle	object	container style		{}
cardContainerStyle	object	cardContainerStyle style		{}
lowerCardZoom	number	lower card zoom		0.95
animDuration	number	card animation duration		150
horizontalThreshold	number	horizontal swipe threshold		width * 0.65
rotationAngle	number	rotation angle (deg) for the card		10
loop	bool	keep swiping indefinitely		true
renderNoMoreCard	func	renders what is shown after swiped last card		() => null
renderYep	func	renders Yep label		() => null
renderNope	func	renders Nope label		() => null
onSwipeStart	func	function to be called when a card swipe starts		() => {}
onSwipeChangeDirection	func	function to be called when a card is active and changes its direction (left, right).		() => {}
onSwipeEnd	func	function to be called when a card swipe ends (card is released)		() => {}
onSwiped	func	function to be called when a card is swiped. it receives the swiped card index		() => {}
onSwipedLeft	func	function to be called when a card is swiped left. it receives the swiped card index		() => {}
onSwipedRight	func	function to be called when a card is swiped right. it receives the swiped card index		() => {}
onNoMoreCards	func	function to be called when all elements in array are finished		() => {}

CardsSwipe actions

Props	type
swipeLeft	func
swipeRight	func

  <CardsSwipe ref={swiper => { this.swiper = swiper }} />

  <TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
    <Text>Left</Text>
  </TouchableOpacity>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT