1.1.0 • Published 2 months ago
react-native-wallet-cards v1.1.0
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 |