# @frknltrk/react-native-swipeable-deck

> swipeable card deck for games

Latest version **4.0.0** (published 2025-06-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @frknltrk/react-native-swipeable-deck
pnpm add @frknltrk/react-native-swipeable-deck
yarn add @frknltrk/react-native-swipeable-deck
bun add @frknltrk/react-native-swipeable-deck
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2025-06-29 |
| First published | 2023-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 3 |
| Unpacked size | 37.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | futurk |
| Maintainers | frknltrk |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/@frknltrk/react-native-swipeable-deck
- Repository: https://github.com/futurk/react-native-swipeable-deck
- Homepage: https://github.com/futurk/react-native-swipeable-deck#readme
- Issues: https://github.com/futurk/react-native-swipeable-deck/issues
- npm.io page: https://npm.io/package/@frknltrk/react-native-swipeable-deck

## Dependencies (3)

- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.22
- [react-native-reanimated](https://npm.io/package/react-native-reanimated.md) ^3.15.3
- [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) ^2.22.1

## 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

- 4.0.0 (latest) — 2025-06-29
- 3.6.0 — 2025-02-11
- 3.5.1 — 2025-02-05
- 3.5.0 — 2025-01-28
- 3.4.1 — 2025-01-27
- 3.4.0 — 2025-01-27
- 3.3.4 — 2025-01-23
- 3.3.3 — 2024-10-04
- 3.3.2 — 2024-09-29
- 3.3.1 — 2024-09-28
- 3.3.0 — 2024-09-28
- 3.2.0 — 2024-09-27
- 3.1.0 — 2024-09-27
- 3.0.0 — 2024-04-11
- 2.0.0 — 2024-04-01
- … 8 more at https://npm.io/package/@frknltrk/react-native-swipeable-deck/versions

## README

# @frknltrk/react-native-swipeable-deck

![npm](https://img.shields.io/npm/v/@frknltrk/react-native-swipeable-deck) ![License](https://img.shields.io/npm/l/@frknltrk/react-native-swipeable-deck)

A swipeable card deck component for React Native, perfect for creating game-like experiences with swipe gestures. Inspired by [PartyQs](https://play.google.com/store/apps/details?id=com.partyqs), [react-native-swipe-cards-deck](https://github.com/swaplet/react-native-swipe-cards-deck) and [swipeable_card](https://github.com/ninest/swipeable_card).

Click "Shuffle" to see the [**live demo here**](https://hadisorsana.web.app/).

<img src="doc/demo_2.gif" width="300" height="533"/>

## Features

- Support for swiping left and right
- Animated transitions for card scaling and movement
- Customizable swipe actions (e.g., disable left or right swipes)
- Easy integration with iOS and Android platforms
- Supports custom card rendering for maximum flexibility

## Installation

Install the package using npm or yarn:

```bash
$ npm install @frknltrk/react-native-swipeable-deck
```

Or using yarn:

```bash
$ yarn add @frknltrk/react-native-swipeable-deck
```

Make sure you also have the following peer dependencies installed:

```bash
$ npm install react-native-gesture-handler react-native-reanimated
```

## Basic Usage

Here’s a simple example of how to use the `SwipeableDeck` component:

```tsx
import React, { useState } from 'react';
import { Text, View } from 'react-native';
import SwipeableDeck from '@frknltrk/react-native-swipeable-deck';

const data = [
  { id: '1', text: 'Card 1' },
  { id: '2', text: 'Card 2' },
  { id: '3', text: 'Card 3' },
];

const App = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const renderCard = (item) => (
    <View style={{ padding: 20, backgroundColor: 'lightblue' }}>
      <Text>{item.text}</Text>
    </View>
  );

  return (
    <SwipeableDeck
      currentIndex={currentIndex}
      setCurrentIndex={setCurrentIndex}
      data={data}
      renderCard={renderCard}
      cardMarginHorizontalPercentage={5}
    />
  );
};

export default App;
```

### Props

| Prop                   | Type                           | Description                                                     | Default |
| ---------------------- | ------------------------------ | --------------------------------------------------------------- | ------- |
| `currentIndex`         | `number`                       | Index of the current card to be displayed.                      | `0`     |
| `setCurrentIndex`      | `(index: number) => void`      | Callback to update the current card index.                      |         |
| `data`                 | `T[]`                          | Array of data items for the deck.                               | `[]`    |
| `renderCard`           | `(item: T) => React.ReactNode` | Function to render each card.                                   |         |
| `cardMarginHorizontalPercentage` | `number`             | Sets the horizontal margin percentage for the cards. | `0` |
| `onSwipeLeftGo`    | `'PREV' \| 'NEXT' \| null`         | Action for left swipe: move to previous, next, or disable true. | `'NEXT'` |
| `onSwipeRightGo`    | `'PREV' \| 'NEXT' \| null`        | Action for right swipe: move to previous, next, or disable | `'PREV'` |

### Example with Swipe Restrictions

```tsx
<SwipeableDeck
  currentIndex={currentIndex}
  setCurrentIndex={setCurrentIndex}
  data={data}
  renderCard={renderCard}
  cardMarginHorizontalPercentage={5} 
  onSwipeLeftGo="NEXT" // Allow left swipe to go to the next card
  onSwipeRightGo={null} // Disable right swipe
/>
```

## Development

If you want to contribute or modify the package, you can run the example app:

```bash
$ npm run bootstrap
$ npm run example
```

### To Do

- [x] clamping
- [ ] trigger swipe animations through buttons
- [x] add props: swipeLeftDisabled, swipeRightDisabled
- [x] add props: backwardMoveDisabled, actionsReversed

### Scripts

| Command           | Description                             |
| ----------------- | --------------------------------------- |
| `npm run test`    | Run tests using Jest                    |
| `npm run lint`    | Lint your code using ESLint             |
| `npm run release` | Create a new release using `release-it` |

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

## Contributing

Feel free to submit issues and pull requests! Contributions are welcome.

## Bugs & Feedback

If you encounter any issues or have suggestions for improvements, please open an issue on the [GitHub Issues page](https://github.com/frknltrk/react-native-swipeable-deck/issues).

## Author

[@frknltrk](https://github.com/frknltrk) - Furkan Unluturk, also thanks to [@aliefee](https://github.com/aliefee) for his contributions.

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