# react-native-flip-card

> The card component which has a motion of flip for React Native(iOS/Android)

Latest version **3.5.7** (published 2023-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-flip-card
pnpm add react-native-flip-card
yarn add react-native-flip-card
bun add react-native-flip-card
```

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.5.7 |
| Published | 2023-02-13 |
| First published | 2016-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-native-flip-card) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 13.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 389 |
| Author | moschan |
| Maintainers | moschan, jdla1o |
| Keywords | react-component, react-native, ios, android, card, flip |

## Links

- npm: https://www.npmjs.com/package/react-native-flip-card
- Repository: https://github.com/moschan/react-native-flip-card
- Homepage: https://github.com/moschan/react-native-flip-card#readme
- Issues: https://github.com/moschan/react-native-flip-card/issues
- npm.io page: https://npm.io/package/react-native-flip-card

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [deprecated-react-native-prop-types](https://npm.io/package/deprecated-react-native-prop-types.md) ^4.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 3.5.7 (latest) — 2023-02-13
- 3.5.6 — 2020-05-14
- 3.5.5 — 2019-03-29
- 3.5.4 — 2019-03-20
- 3.5.3 — 2019-03-11
- 3.5.2 — 2017-10-15
- 3.5.1 — 2017-09-02
- 3.5.0 — 2017-08-13
- 3.4.1 — 2017-05-26
- 3.4.0 — 2017-05-04
- 3.3.6 — 2017-04-29
- 3.3.5 — 2017-04-29
- 3.3.4 — 2017-04-29
- 3.3.3 — 2017-02-18
- 3.3.2 — 2017-02-15
- … 8 more at https://npm.io/package/react-native-flip-card/versions

## README

react-native-flip-card
===

> The card component which have motion of flip for React Native(iOS/Android)

[![NPM](https://nodei.co/npm/react-native-flip-card.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-flip-card/)

[![npm](https://img.shields.io/npm/v/react-native-flip-card.svg)]()[![npm](https://img.shields.io/npm/l/react-native-flip-card.svg)]()

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) [![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com)

Demo
---
![](./doc/ver3_android_demo.gif)


Installation
==

in Cli
---
```
npm i react-native-flip-card
```


Usage
===

Simple
---
```
import FlipCard from 'react-native-flip-card'

<FlipCard>
  {/* Face Side */}
  <View style={styles.face}>
    <Text>The Face</Text>
  </View>
  {/* Back Side */}
  <View style={styles.back}>
    <Text>The Back</Text>
  </View>
</FlipCard>
```

Customized
---
```
<FlipCard 
  style={styles.card}
  friction={6}
  perspective={1000}
  flipHorizontal={true}
  flipVertical={false}
  flip={false}
  clickable={true}
  onFlipEnd={(isFlipEnd)=>{console.log('isFlipEnd', isFlipEnd)}}
>
  {/* Face Side */}
  <View style={styles.face}>
    <Text>The Face</Text>
  </View>
  {/* Back Side */}
  <View style={styles.back}>
    <Text>The Back</Text>
  </View>
</FlipCard>
```

Props
===

flip(bool) `Default: false`
---
If you change default display side, you can set `true` to this param. If you change side, you can pass `bool` variable dynamically.

clickable(bool) `Default: true`
---
If you want to disable click a card, you can set `false` to this param.

friction(number) `Default: 6`
---
The friction of card animation

perspective(number) `Default: 0`
---
The amount of perspective applied to the flip transformation

flipHorizontal(bool) `Default: false`
---
If you set true, a card flip to horizontal.

![](./doc/ver2_horizontal.gif)


flipVertical(bool) `Default: true`
---
If you set false, a card not flip to vertical. If you set true both `flipHorizontal` and `flipVertical` , a card flip to diagonal.


vertical | diagnoal
---- | ----
 ![](./doc/ver2_vertical.gif)| ![](./doc/ver2_diagonal.gif)

onFlipStart(function) `(isFlipStart) => {}`
---
When a card starts a flip animation, call `onFlipEnd` function with param.

onFlipEnd(function) `(isFlipEnd) => {}`
---
When a card finishes a flip animation, call `onFlipEnd` function with param.

alignHeight(boolean) `Default:false`
---
If you pass `true` to `alignHeight` param, the card keep height of bigger side.

alignWidth(boolean) `Default:false`
---
If you pass `true` to `alignWidth` param, the card keep width of bigger side.

useNativeDriver(boolean) `Default:false`
---
If you pass `true` to `useNativeDriver` param, the card animation will utilize the native driver.

Credits
===
Inspired by [react-flipcard](https://github.com/mzabriskie/react-flipcard)


License
===
MIT

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