react-native-wallet-cards's Introduction

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

react-native-wallet-cards's People