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 {SafeAreaView, StyleSheet, LayoutAnimation} from 'react-native';
import {
  SwipeableFlatList,
  SwipeableQuickActions,
  SwipeableQuickActionButton,
} 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.