react-native-swipable-list-row
NOTICE
This one is deprecated!!! Don't USE IT!!!
As npmjs.org not allowed to unpublish the repo (which I didn't know before), and I didn't know that wix had a pretty awesome one, so this one is not going to be maintained anymore. SORRY.
You can check the same one in wix/react-native-interactable.
Introduction
A simple and efficient react native swipable list row implementation.
To make a swipable list row, we had two challenges:
- The back/hidden row layout should keep up with front/visible row.
- The listView scroll should be disabled while pull the row.
By using Animated.View
, and Animated.event
to hack the onLayout event, it provide more efficient way to update layout, as they all happened in native side, no re-render required.
By using setNativeProps
from list view, it will be able to do the second one.
Just notice, setNativeProps
is supported in FlatList
from RN >= 0.47only.
The code is inspired by Tal Kol speech at React Conf 2017.
https://www.youtube.com/watch?v=mjsv8NJnt5k
Usage
You can do installation:
npm install -S react-native-swipable-list-row
Or just copy to use it in your project, more better.
import React Component from 'react'; import View Text ScrollView Dimensions TouchableHighlight FlatList from 'react-native'; import SwipableRowView from './SwipableRowView'; const window = Dimensions; { ; thisstate = value: 'Hello row' ; thisdata = ; for let i = 0; i < 50; i += 1 thisdata; thisupdate = 0; thispanResponder = null; thisrowView = null; thisscrollView = null; } itemid <TouchableHighlight = = = = > <View = > <Text = > itemtitle </Text> </View> </TouchableHighlight> ; { return <View = > <Button> Delete </Button> </View> ; } { const item = rowDataitem; return <SwipableRowView = = = = = /> ; } { return <View = > <FlatList = = = = = = // = = // = /> </View> ; }