react-native-wallet-cards
v1.1.0
Published
React Native Wallet Cards
Downloads
33
Maintainers
Readme
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|