react-native-swipe-list-view

A ListView with rows that swipe open and closed.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-swipe-list-view
2,761623.2.93 years ago8 years agoMinified + gzip package size for react-native-swipe-list-view in KB

Readme

npm npm
react-native-swipe-list-view

``<SwipeListView>`` is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened.
Also includes ``<SwipeRow>` if you want to use a swipeable row outside of the `<SwipeListView>``
šŸ”„šŸ”„ BREAKING CHANGES šŸ”„šŸ”„
For use with RN 0.60+ please use react-native-swipe-list-view@2.0.0+
RN 0.60 and RNSLV 2.0.0 deprecate the use of ListView entirely, please see example.js for examples and see the migrating-to-flatlist doc for a migration guide if you aren't already using FlatList.
The useFlatList prop is no longer required, as FlatList is the default ListView used.

Example


Try it out! https://snack.expo.io/@jemise111/react-native-swipe-list-view
(What's a Snack?)

Installation

npm install --save react-native-swipe-list-view

Running the example

The application under ./SwipeListExample will produce the above example. To run execute the following:
  • ``git clone https://github.com/jemise111/react-native-swipe-list-view.git`
  • `cd react-native-swipe-list-view`
  • `cd SwipeListExample`
  • `yarn`
  • `cd ios`
  • `pod install`
  • `cd ..`
  • `react-native run-ios | react-native run-android``

Android: If you get the following error SwipeListExample/android/app/debug.keystore' not found for signing config 'debug'.:
cd android/app/ && keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
// answer the questions
cd ../..

Usage

import { SwipeListView } from 'react-native-swipe-list-view';

//... note: your data array objects MUST contain a key property 
//          or you must pass a keyExtractor to the SwipeListView to ensure proper functionality
//          see: https://reactnative.dev/docs/flatlist#keyextractor

  this.state.listViewData = Array(20)
    .fill("")
    .map((_, i) => ({ key: `${i}`, text: `item #${i}` }));

//...
render() {
    return (
        <SwipeListView
            data={this.state.listViewData}
            renderItem={ (data, rowMap) => (
                <View style={styles.rowFront}>
                    <Text>I am {data.item.text} in a SwipeListView</Text>
                </View>
            )}
            renderHiddenItem={ (data, rowMap) => (
                <View style={styles.rowBack}>
                    <Text>Left</Text>
                    <Text>Right</Text>
                </View>
            )}
            leftOpenValue={75}
            rightOpenValue={-75}
        />
    )
}

See ``example.js` for full usage guide (including using `<SwipeRow>`` by itself)

Note:

If your row is touchable (TouchableOpacity, TouchableHighlight, etc.) with an ``onPress` function make sure `renderItem`` returns the Touchable as the topmost element.
GOOD:
renderItem={ data => (
    <TouchableHighlight onPress={this.doSomething.bind(this)}>
        <View>
            <Text>I am {data.item} in a SwipeListView</Text>
        </View>
    </TouchableHighlight>
)}
BAD:
renderItem={ data => (
    <View>
        <TouchableHighlight onPress={this.doSomething.bind(this)}>
            <Text>I am {data.item} in a SwipeListView</Text>
        </TouchableHighlight>
    </View>
)}

Component APIs

<SwipeListView />
<SwipeRow />

Flatlist / SectionList support

SwipeListView now supports FlatList and SectionList! (as of v1.0.0)
Please see the migrating-to-flatlist doc for all details. And see example.js for a full usage example.

Also see docs/ for help with

Manually Closing Rows Per Row Behavior Actions

And the examples/ folder for examples on

Swipe to Delete (also see "Actions" for an alternative way to achieve this) Per Row Behavior UI Based on Swipe Values Actions

Core Support

RN Core added a SwipeList component as of v0.27.0 It is actively being worked on and has no documentation yet. So I will continue to maintain this component until a future date.

License

MIT