React Native Card Swiper

A card swiper library using Reanimated 2

Preview

Installation

npm install --save rn-card-swiper

or

yarn add rn-card-swiper

Dependencies

yarn add react-native-gesture-handler react-native-reanimated

Usage

import { CardSwiper } from 'rn-card-swiper';

// ...
const Data = [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }, { id: '6' }, { id: '7' }];

const _renderCard = (item: any) => {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'flex-end',
          justifyContent: 'flex-end',
        }}>
        <Text
          style={{
            fontSize: 400,
            fontWeight: 'bold',
            color: '#C7E2FF',
            right: -40,
            bottom: -20,
          }}>
          {item.id}
        </Text>
      </View>
    );
  };

const _renderEmptyMessage = () => {
    return (
      <View>
        <Text
          style={{
            fontSize: 28,
            fontWeight: 'bold',
            color: '#C7E2FF',
          }}
        >
          No more cards...
        </Text>
      </View>
    );
  };
// ...
<CardSwiper
  stackSize={5}
  cardsData={Data}
  renderCard={_renderCard}
  renderEmptyView={_renderEmptyMessage}
  cardStyle={
    {
      width: 300,
      height: 400,
      backgroundColor: 'white',
      borderColor: '#0095FF',
      borderWidth: 1,
    }
  }
  />;
// ...

Component props

| prop | type | default | description | | ------------------- | -------------- | ------------- | ----------------------------------------------------------------------------------------- | | cardsData | array | [] | array of data for the cards to be rendered | | renderCard | func | | renders the card based on the data | | renderEmptyView | func | | renders the view to be shown after swiped last card | | stackSize | number | 5 | number of cards to be shown | | startIndex | number | 0 | initial card index | | infinite | boolean | true | keep swiping indefinitely | | cardStyle | object | | Ooverride default card style | | containerStyle | object | | override default container style | | offsetDirection | object | "Top" | which way cards offsets will be shown | | offsetSpace | number | 8 | distance between cards | | scaleRatio | number | 0.8 | cards scale ratio in stack | | disableLeftSwipe | boolean | false | disable left swipe | | disableRightSwipe | boolean | false | disable right swipe | | disableTopSwipe | boolean | false | disable top swipe | | disableBottomSwipe | boolean | false | disable bottom swipe | | disableSwipe | boolean | false | disable swipe in all directions | | horizontalSwipe | boolean | true | swipe cards horizontally | | verticalSwipe | boolean | true | swipe cards vertically | | onlyTopSwipeable | boolean | false | only top card can be swiped | | cardElevated | boolean | true | puts shadows on card | | touchInset | number | 10 | card's touch range from the edge | | onSwipedAll | func | | function to be called when the last card is swiped | | onSwiped | func | | function to be called when a card is swiped | | onTap | func | | function to be called when a card is tapped | | onReset | func | | function to be called when a card is released back to it's original position | | onSwipedLeft | func | | function to be called when a card swiped left | | onSwipedRight | func | | function to be called when a card is swiped right | | onSwipedTop | func | | function to be called when a card is swiped top | | onSwipedBottom | func | | function to be called when a card is swiped bottom |

License

MIT