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>

Example

    

Try it out! https://snack.expo.io/@jemise111/react-native-swipe-list-view

(What's a Snack?)

Installation

1npm install --save @nvthai/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/nvthai/react-native-swipe-list-view.git
• cd react-native-swipe-list-view
• cd SwipeListExample
• yarn
• react-native run-ios | react-native run-android

Usage

1import { SwipeListView } from 'react-native-swipe-list-view';
2
3render() {
4    return (
5        <SwipeListView
6            useFlatList
7            data={this.state.listViewData}
8            renderItem={ (data, rowMap) => (
9                <View style={styles.rowFront}>
10                    <Text>I am {data.item} in a SwipeListView</Text>
11                </View>
12            )}
13            renderHiddenItem={ (data, rowMap) => (
14                <View style={styles.rowBack}>
15                    <Text>Left</Text>
16                    <Text>Right</Text>
17                </View>
18            )}
19            leftOpenValue={75}
20            rightOpenValue={-75}
21        />
22    )
23}

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:

1renderItem={ data => (
2    <TouchableHighlight onPress={this.doSomething.bind(this)}>
3        <View>
4            <Text>I am {data.item} in a SwipeListView</Text>
5        </View>
6    </TouchableHighlight>
7)}

BAD:

1renderItem={ data => (
2    <View>
3        <TouchableHighlight onPress={this.doSomething.bind(this)}>
4            <Text>I am {data.item} in a SwipeListView</Text>
5        </TouchableHighlight>
6    </View>
7)}

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.

You can continue to use the (deprecated) ListView component, however there are some BREAKING CHANGES that are explained in that doc as well

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