react-native-animated-card-swipe

React Native Card Swiper

A customizable React Native component for credit card swiping with activity tracking. MORE UPDATES COMING SOON!!

Installation

npm install react-native-card-swiper
# or
yarn add react-native-card-swiper

Make sure you have the following peer dependencies installed:

npm install react-native-gesture-handler react-native-reanimated
# or
yarn add react-native-gesture-handler react-native-reanimated

Usage

import React from 'react';
import { View } from 'react-native';
import { CardSwiper, CardType } from 'react-native-card-swiper';

const App = () => {
  // Your card data
  const cards: CardType[] = [
    {
      cardId: 1,
      name: 'John Doe',
      number: '1234 5678 9101 1121',
      exp: '12/29',
      cvv: '123',
      type: 'mastercard',
      image: require('./assets/Mastercard.png'),
      backgroundColor: '#6d85a4',
      activity: [
        {
          name: 'Netflix',
          date: '20 Min ago',
          price: '-$22.99',
          image: require('./assets/Netflix.png'),
          cardId: 1,
        },
        // More activity items
      ],
    },
    // More cards
  ];

  const cardColors = [
    '#5352ED',
    '#FF6B81',
    '#1DD1A1',
    '#FFC312',
    '#6C5CE7',
  ];
  return (
    <CardSwiperScreen
      data={data}
      maxVisibleCards={3}
      showActivity={true}
      activityTitle='Recent'
      cardColors={cardColors}
      backgroundColor='#000000'
    />
  );
};

export default App;

Props

Prop	Type	Default	Description
data	CardType[]	Required	Array of card data
cardColors	string[]	Required	Array of background colors for cards
maxVisibleCards	number	3	Maximum number of cards visible
showActivity	boolean	true	Show activity section
activityTitle	string	'Recent Activity'	Title for the activity section
backgroundColor	string	'#111111'	Background color of the container
containerStyle	ViewStyle	{}	Style for main container
cardContainerStyle	ViewStyle	{}	Style for card container
activityContainerStyle	ViewStyle	{}	Style for activity container
activityTitleStyle	TextStyle	{}	Style for activity title

Types

interface ActivityType {
  name: string;
  date: string;
  price: string;
  image: ImageSourcePropType;
  cardId: number;
}

interface CardType {
  cardId: number;
  name: string;
  number: string;
  exp: string;
  cvv: string;
  type: string;
  image: ImageSourcePropType;
  backgroundColor: string;
  activity: ActivityType[];
}

License

MIT