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