Skip to content
A React Native ListView component with rows that swipe open and closed
JavaScript Objective-C Ruby Python Java
Branch: master
Clone or download
Pull request Compare This branch is 21 commits behind jemise111:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
SwipeListExample
bin
components
docs
lib
types
.eslintrc.json
.gitignore
.npmignore
.prettierrc
LICENSE
README.md
package.json
yarn.lock

README.md

npm npm

react-native-swipe-list-view



<SwipeListView> is a 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
  • react-native run-ios | react-native run-android

Usage

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

render() {
    return (
        <SwipeListView
            data={this.state.listViewData}
            renderItem={ (data, rowMap) => (
                <View style={styles.rowFront}>
                    <Text>I am {data.item} 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.

Other Useful Guides

  • Per Row Behavior (Define different swipe values, stop values, etc for each individual row)
  • UI Based On Swipe Values (aka the gmail effect - animate components in rows based on current swipe position)
  • Swipe To Delete (Swiping a row all the way across causes a delete animation)

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

You can’t perform that action at this time.