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

1npm 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'.:

1cd android/app/ && keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
2// answer the questions
3cd ../..

Usage

1import { SwipeListView } from 'react-native-swipe-list-view';
2
3//... note: your data array objects MUST contain a key property 
4//          or you must pass a keyExtractor to the SwipeListView to ensure proper functionality
5//          see: https://reactnative.dev/docs/flatlist#keyextractor
6
7  this.state.listViewData = Array(20)
8    .fill("")
9    .map((_, i) => ({ key: `${i}`, text: `item #${i}` }));
10
11//...
12render() {
13    return (
14        <SwipeListView
15            data={this.state.listViewData}
16            renderItem={ (data, rowMap) => (
17                <View style={styles.rowFront}>
18                    <Text>I am {data.item.text} in a SwipeListView</Text>
19                </View>
20            )}
21            renderHiddenItem={ (data, rowMap) => (
22                <View style={styles.rowBack}>
23                    <Text>Left</Text>
24                    <Text>Right</Text>
25                </View>
26            )}
27            leftOpenValue={75}
28            rightOpenValue={-75}
29        />
30    )
31}

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.

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