# react-native-wallet-cards

> React Native Wallet Cards

Latest version **1.1.0** (published 2024-03-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-wallet-cards
pnpm add react-native-wallet-cards
yarn add react-native-wallet-cards
bun add react-native-wallet-cards
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-03-13 |
| First published | 2019-08-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Camilo Henao |
| Maintainers | camilo5972 |
| Keywords | React, Native, Wallet, Cards, Animated |

## Links

- npm: https://www.npmjs.com/package/react-native-wallet-cards
- Repository: https://github.com/camilo5972/react-native-wallet-cards
- Homepage: https://github.com/camilo5972/react-native-wallet-cards#readme
- Issues: https://github.com/camilo5972/react-native-wallet-cards/issues
- npm.io page: https://npm.io/package/react-native-wallet-cards

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-native-animatable](https://npm.io/package/react-native-animatable.md) ^1.3.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-03-13
- 1.0.5 — 2020-02-18
- 1.0.4 — 2019-11-11
- 1.0.3 — 2019-08-13
- 1.0.2 — 2019-08-12
- 1.0.1 — 2019-08-12
- 1.0.0 — 2019-08-11

## README

# React Native Wallet Cards

React Native component for displaying cards with a wallet style.

### Usage

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

Compact view             |  Expand view
:-------------------------:|:-------------------------:
![](http://ipfs-gw.everis.id/ipfs/QmPNzQmrrgVVuuYomKNQhLB8Y76DW7PCPaSN1Rc7DSmH88?v=4&s=300)  |  ![](http://ipfs-gw.everis.id/ipfs/Qme7rR4x4H1SHUWmQ22qNLS867LDaonwtRvTHRRm3Lmop9?v=4&s=300)


```javascript
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|

---
_Source: https://npm.io/package/react-native-wallet-cards · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._