https://github.com/naturalclar/react-native-swipe-list
Swipeable FlatList Component for react-native
https://github.com/naturalclar/react-native-swipe-list
flatlist listview react-native swipeable
Last synced: 9 months ago
JSON representation
Swipeable FlatList Component for react-native
- Host: GitHub
- URL: https://github.com/naturalclar/react-native-swipe-list
- Owner: Naturalclar
- License: mit
- Created: 2020-02-09T10:50:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T04:36:13.000Z (over 3 years ago)
- Last Synced: 2025-09-16T18:59:54.409Z (10 months ago)
- Topics: flatlist, listview, react-native, swipeable
- Language: TypeScript
- Homepage:
- Size: 1.29 MB
- Stars: 35
- Watchers: 3
- Forks: 3
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-swipe-list
[![Build Status][build-badge]][build]
[![Version][version-badge]][package]
![Supports iOS and Android][support-badge]
[![MIT License][license-badge]][license]
An FlatList Component that is swipeable.
This was originally a fork of an experimental component `SwipeableFlatList` which was removed from the react-native core.
## Install
In order to use this package, you will also need to install `react-native-gesture-handler` to your project.
```
yarn add react-native-swipe-list react-native-gesture-handler
```
## Usage
```tsx
import React, { useState } from 'react';
import { LayoutAnimation, SafeAreaView, StyleSheet } from 'react-native';
import {
SwipeableFlatList,
SwipeableQuickActionButton,
SwipeableQuickActions,
} from 'react-native-swipe-list';
import { ListItem } from './ListItem';
const styles = StyleSheet.create({
container: { flex: 1 },
});
const initialData = [...Array(30)].map((_, index) => ({
id: index,
text: `Item ${index}`,
}));
export const TestModule = () => {
const [data, setData] = useState(initialData);
return (
}
keyExtractor={index => index.id}
renderLeftActions={({ item }) => (
{
LayoutAnimation.configureNext(
LayoutAnimation.Presets.easeInEaseOut,
);
setData(data.filter(value => value !== item.album));
}}
text="delete"
textStyle={{ fontWeight: 'bold', color: 'white' }}
/>
)}
renderRightActions={({ item }) => (
{}} text="Other" />
{}} text="Flag" />
{}} text="Archive" />
)}
/>
);
};
```
# Reference
## Props
`SwipeableFlatList` takes in `FlatListProps` as well as the following props:
### `renderLeftActions`
Views to be displayed when user swipes the item from the left side.
| Type | Required |
| --------------------------------------------- | -------- |
| (info: ListRenderItemInfo) => React.ReactNode | No |
---
### `renderRightActions`
Views to be displayed when user swipes the item from the right side.
| Type | Required |
| --------------------------------------------- | -------- |
| (info: ListRenderItemInfo) => React.ReactNode | No |
---
### `closeOnScroll`
When `true`, swiped view will close when user scrolls.
Default is `true`
| Type | Required |
| ------- | -------- |
| boolean | No |
## License
The library is released under the MIT license. For more information see [`LICENSE`](/LICENSE).
[build-badge]: https://img.shields.io/github/workflow/status/Naturalclar/react-native-swipe-list/Main%20workflow?style=flat-square
[build]: https://github.com/Naturalclar/react-native-swipe-list/actions
[version-badge]: https://img.shields.io/npm/v/react-native-swipe-list.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-native-swipe-list
[support-badge]: https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/react-native-swipe-list.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT