react-native-swipe-list

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

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 (
    <SafeAreaView style={styles.container}>
      <SwipeableFlatList
        data={data}
        renderItem={({ item }) => <ListItem {...item} />}
        keyExtractor={index => index.id}
        renderLeftActions={({ item }) => (
          <SwipeableQuickActions>
            <SwipeableQuickActionButton
              onPress={() => {
                LayoutAnimation.configureNext(
                  LayoutAnimation.Presets.easeInEaseOut,
                );
                setData(data.filter(value => value !== item.album));
              }}
              text="delete"
              textStyle={{ fontWeight: 'bold', color: 'white' }}
            />
          </SwipeableQuickActions>
        )}
        renderRightActions={({ item }) => (
          <SwipeableQuickActions>
            <SwipeableQuickActionButton onPress={() => {}} text="Other" />
            <SwipeableQuickActionButton onPress={() => {}} text="Flag" />
            <SwipeableQuickActionButton onPress={() => {}} text="Archive" />
          </SwipeableQuickActions>
        )}
      />
    </SafeAreaView>
  );
};

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.