@frknltrk/react-native-swipeable-deck NPM

@frknltrk/react-native-swipeable-deck

npm License

A swipeable card deck component for React Native, perfect for creating game-like experiences with swipe gestures.

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:

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

Or using yarn:

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

Make sure you also have the following peer dependencies installed:

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

Basic Usage

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

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}
    />
  );
};

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.
`swipeLeftDisabled`	`boolean`	Disables left swipe when set to true.	`false`
`swipeRightDisabled`	`boolean`	Disables right swipe when set to true.	`false`
`backwardMoveDisabled`	`boolean`	Disables backward movement (going to the previous card).	`false`
`actionsReversed`	`boolean`	Reverses the swipe actions (left for next, right for previous).	`false`

Example with Swipe Restrictions

<SwipeableDeck
  currentIndex={currentIndex}
  setCurrentIndex={setCurrentIndex}
  data={data}
  renderCard={renderCard}
  swipeLeftDisabled={true}  // Disable left swipe
  swipeRightDisabled={false} // Allow right swipe
/>