rn-card-swiper v1.1.1

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

License

MIT