React Native Wallet Cards

React Native component for displaying cards with a wallet style.

Usage

$ npm install --save react-native-wallet-cards

Compact view | Expand view :-------------------------:|:-------------------------: |

import CardsWallet from 'react-native-wallet-cards';
import { View, Text } from 'react-native';

export class Wallet extends Component {

    data = [
        <View style={{flex: 1}}><Text>Content Card 1</Text></View>,
        <View style={{flex: 1}}><Text>Content Card 2</Text></View>,
        <View style={{flex: 1}}><Text>Content Card 3</Text></View>,
        <View style={{flex: 1}}><Text>Content Card 4</Text></View>,
        <View style={{flex: 1}}><Text>Content Card 5</Text></View>,
        <View style={{flex: 1}}><Text>Content Card 6</Text></View>
    ]

    render () {
        return (
            <CardsWallet 
                data={this.data}
            />
        );
    }
}

Properties

Note: Data is the only property required by the component.

| Prop | Description | Default | |---|---|---| |cardHeight|Height of each card. |170| |cardBgColor|Background color of each card. |white| |cardBorderRadius|Border radius for the card. |10| |cardShadowColor|Card shadow color. |#000| |showCardShadow|enable / disable card shadow. |true| |cardSeparation|Separation distance between each card. |50| |cardEasing|Timing function for the animation: linear, ease, ease-in, ease-out, ease-in-out, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-circ, ease-out-circ, ease-in-out-circ, ease-in-expo, ease-out-expo, ease-in-out-expo, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-quart, ease-out-quart, ease-in-out-quart, ease-in-quint, ease-out-quint, ease-in-out-quint, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-back, ease-out-back, ease-in-out-back. |ease-in-out| |easingTime|Animation duration time (milliseconds). |300| |autoClose|Close all cards except the selected card. |false| |cardOpenOffset| Offset between the open card and the next card |20|