https://github.com/esthor/react-native-swipeable-list

A zero-dependency Swipeable FlatList for React-Native, with Gestures, Quick Actions, and Animations. Simple as that.
https://github.com/esthor/react-native-swipeable-list

android component ios react react-native react-native-component react-native-flatlist react-native-web

Last synced: 4 days ago
JSON representation

A zero-dependency Swipeable FlatList for React-Native, with Gestures, Quick Actions, and Animations. Simple as that.

• Host: GitHub
• URL: https://github.com/esthor/react-native-swipeable-list
• Owner: esthor
• License: mit
• Created: 2019-11-10T21:18:45.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2026-05-09T12:47:21.000Z (10 days ago)
• Last Synced: 2026-05-11T01:36:14.571Z (8 days ago)
• Topics: android, component, ios, react, react-native, react-native-component, react-native-flatlist, react-native-web
• Language: JavaScript
• Homepage:
• Size: 6.48 MB
• Stars: 753
• Watchers: 4
• Forks: 34
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-side-quests - esthor/react-native-swipeable-list - dependency swipeable FlatList with quick actions and animations — Inbox-style list interactions (Mobile / React Native & Expo)

README

          
# react-native-swipeable-list

[![npm version](https://img.shields.io/npm/v/react-native-swipeable-list?color=brightgreen)](https://www.npmjs.com/package/react-native-swipeable-list)

[![Downloads](https://img.shields.io/npm/dm/react-native-swipeable-list.svg?sanitize=true)](https://npmcharts.com/compare/react-native-swipeable-list?minimal=true)

![License](https://img.shields.io/npm/l/react-native-swipeable-list?color=brightgreen)

![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)

A zero-dependency, Swipeable FlatList for React-Native with Quick Actions, Gestures, and Animations.

![animated screenshot of a swipeable flatlist email inbox mockup using react-native-swipeable-list](images/react-native-swipeable-list-demo2.gif)

## Usage

1. Install the package in your project: `npm install react-native-swipeable-list` or `yarn add react-native-swipeable-list`

2. Import the component into your component: `import SwipeableFlatList from 'react-native-swipeable-list';`

3. Pass it a data array. It inherits [FlatListProps from the standard `FlatList` component from react-native](https://facebook.github.io/react-native/docs/flatlist).

It can be passed additional props:

- `shouldBounceOnMount` (default = `true`) - To alert the user that swiping is possible, the first row can bounce on component mount. Type `boolean`

- `maxSwipeDistance` - Maximum distance to open to after a swipe. Type `number || (Object => number)`

- `renderQuickActions` - Callback method to render the view that will be unveiled on swipe. Type `renderItemType` (which provides `index` and  `item`, which will be very useful for performing actions on your items)

## Example

Check out the example in the `/examples` folder. Clone this repo, then `cd examples && yarn install && yarn start` and then either  `react-native run-ios` or `react-native run-android` to get the app up and running locally. Play with the code and see what you can do! 😎

## History & Shoutouts

Started from the `SwipeableFlatList` component that was removed from react-native's experimental libraries. (See: )