react-native-swipe-reveal

A Powerful Swipe Animation Library for React Native ✨

Create beautiful swipe animations for your list items. When users swipe, reveal hidden content underneath. Perfect for swipe-to-delete, swipe-to-archive, or any other swipe actions in your app!

Features

This library helps you create smooth swipe animations in your React Native app. Here's what you can do:

• Swipe items left to reveal content (like a delete button)
• Swipe items right to reveal content (like an archive button)
• Swipe items both left and right to show different actions
• Full swipe to left or right to trigger actions (like deleting an item)
• Customize how everything looks with your own styles
• Works smoothly on both iPhone and Android phones

⚠️ Important: This library only works with React Native CLI projects. It won't work if you're using Expo.

Demo

demo.mov

Installation

1. First, install the main library:

# If you use yarn
yarn add react-native-swipe-reveal

# If you use npm
npm install react-native-swipe-reveal

# For iPhone (iOS) users, you also need to run:
cd ios && pod install

2. Install and set up required dependencies:

You'll need two additional libraries for this to work:

• React Native Reanimated: Follow the setup guide here
• React Native Gesture Handler: Follow the setup guide here

Make sure to follow their installation guides carefully!

Compatibility

Important to know before you start:

• React Native: Must be version 0.63.0 or newer because React Native Reanimated 3 and Gesture Handler require this minimum version

  • Check which version you have in your package.json file

• React Native Gesture Handler: The version you need depends on your React Native version

  • Check this compatibility table to find the right version

• React Native Reanimated: The version you need depends on your React Native version

  • Check this compatibility table to find the right version

Usage

Look at our example project to see all features in action!

Here's a simple example to get you started:

import { EAnimationType, SwipeableItemWrapper } from 'react-native-swipe-reveal';

<SwipeableItemWrapper
  id="unique-id"
  animationType={EAnimationType['left-swipe']}
  leftSwipeView={<YourUnderlyingComponent />}
>
  <YourItemComponent />
</SwipeableItemWrapper>

Animation Types

You can use these different types of animations in your app:

enum EAnimationType {
  'left-swipe' = 'left-swipe',           // Reveals content when swiping left
  'right-swipe' = 'right-swipe',         // Reveals content when swiping right
  'left-right-swipe' = 'left-right-swipe', // Reveals content when swiping either direction
  'right-full-swipe' = 'right-full-swipe', // Triggers action on full right swipe
  'left-full-swipe' = 'left-full-swipe'    // Triggers action on full left swipe
}

Available Props

Here's everything you can customize in the SwipeableItemWrapper component:

Prop	Required?	What it does	How to use it
id	Yes	A unique identifier for each swipeable item	Can be a number or text. Example: id="item-1" or id={1}
children	Yes	The main content that will be swipeable	This is your main component that users will see and can swipe. Example: <YourListItem />
animationType	No	The type of swipe animation you want	Use one of the EAnimationType values. Example: animationType={EAnimationType['left-swipe']}
leftSwipeView	No*	What shows up when user swipes left	The component that appears underneath when swiping left. Example: leftSwipeView={<DeleteButton />}
rightSwipeView	No*	What shows up when user swipes right	The component that appears underneath when swiping right. Example: rightSwipeView={<ArchiveButton />}
leftFullSwipeView	No*	What shows up on full left swipe	A component that appears when user swipes all the way left. Example: leftFullSwipeView={<DeleteConfirm />}
rightFullSwipeView	No*	What shows up on full right swipe	A component that appears when user swipes all the way right. Example: rightFullSwipeView={<ArchiveConfirm />}
onLeftFullSwipe	No	Function to call on full left swipe	Use this to do something when user swipes all the way left. Example: onLeftFullSwipe={(id) => handleDelete(id)}
onRightFullSwipe	No	Function to call on full right swipe	Use this to do something when user swipes all the way right. Example: onRightFullSwipe={(id) => handleArchive(id)}
leftSwipeViewContainerStyle	No	Custom styles for left swipe container	Style the container of your left swipe view. Example: leftSwipeViewContainerStyle={{ backgroundColor: 'red' }}
rightSwipeViewContainerStyle	No	Custom styles for right swipe container	Style the container of your right swipe view. Example: rightSwipeViewContainerStyle={{ backgroundColor: 'blue' }}
leftFullSwipeViewContainerStyle	No	Custom styles for full left swipe container	Style the container of your full left swipe view. Example: leftFullSwipeViewContainerStyle={{ padding: 10 }}
rightFullSwipeViewContainerStyle	No	Custom styles for full right swipe container	Style the container of your full right swipe view. Example: rightFullSwipeViewContainerStyle={{ margin: 5 }}
itemContainerStyle	No	Custom styles for the main item container	Style the container of your main content. Example: itemContainerStyle={{ borderRadius: 8 }}

⚠️ Required Prop Combinations

Your swipeable items won't work properly unless you follow these rules:

1. Left Swipe Animation

When using animationType="left-swipe":

<SwipeableItemWrapper
  animationType={EAnimationType['left-swipe']}
  leftSwipeView={<DeleteButton />}  // Required!
>
  <YourContent />
</SwipeableItemWrapper>

2. Right Swipe Animation

When using animationType="right-swipe":

<SwipeableItemWrapper
  animationType={EAnimationType['right-swipe']}
  rightSwipeView={<ArchiveButton />}  // Required!
>
  <YourContent />
</SwipeableItemWrapper>

3. Left-Right Swipe Animation

When using animationType="left-right-swipe":

<SwipeableItemWrapper
  animationType={EAnimationType['left-right-swipe']}
  leftSwipeView={<DeleteButton />}    // Required!
  rightSwipeView={<ArchiveButton />}  // Required!
>
  <YourContent />
</SwipeableItemWrapper>

4. Left Full Swipe Animation

When using animationType="left-full-swipe":

<SwipeableItemWrapper
  animationType={EAnimationType['left-full-swipe']}
  leftFullSwipeView={<DeleteConfirm />}  // Required!
>
  <YourContent />
</SwipeableItemWrapper>

5. Right Full Swipe Animation

When using animationType="right-full-swipe":

<SwipeableItemWrapper
  animationType={EAnimationType['right-full-swipe']}
  rightFullSwipeView={<ArchiveConfirm />}  // Required!
>
  <YourContent />
</SwipeableItemWrapper>

⚠️ Warning: If you don't provide the required views for your chosen animation type, the swipe animation won't work! Make sure to always include the matching view prop for your animation type.

License

MIT