react-native-cards-swipe
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

react-native-cards-swipe

Powerful React Native Card Stack Swiper

contributions welcome npm version npm downloads

Preview

App preview

Installation

  1. Install the react-native-cards-swipe package.
npm install react-native-cards-swipe
  1. Then you'll need to install react-native-reanimated version >= 2.1.0 to your project.
  2. 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

Package Sidebar

Install

npm i react-native-cards-swipe

Weekly Downloads

403

Version

1.2.1

License

MIT

Unpacked Size

102 kB

Total Files

34

Last publish

Collaborators

  • tarasvakulka