react-native-draggable-flatlist: Unable to drag the list
I was using the old version (1.1.9). But couldn’t make my flatlist fully draggable. Here was some issue in that version 1. unable to drag if list is long 2) can’t move bottom to top. 3) sometime list item get stuck 4) scrolling stops after first time etc., So after looking for some solution with no result, i decided to upgrade the version of your library. But it is worsen the situation. Now the list is not moving at all. here is my dependencies:
"dependencies": {
"@react-native-community/async-storage": "^1.7.1",
"@react-native-community/datetimepicker": "^2.1.0",
"@react-native-community/netinfo": "^5.5.0",
"@sendgrid/mail": "^6.4.0",
"native-base": "^2.13.8",
"react": "16.9.0",
"react-native": "0.61.2",
"react-native-draggable-flatlist": "^2.3.1",
"react-native-gesture-handler": "^1.6.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^1.0.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-material-menu": "^1.0.0",
"react-native-reanimated": "^1.7.0",
"react-native-searchbar": "^1.16.0",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.4",
"realm": "^4.0.0-beta.0",
"uuid": "^3.4.0"
},
Here is my component structure:
<Root>
<ImageBackground>
.......
<View>
<DraggableFlatList
style={styles.listStyle}
data={this.state.customers}
renderItem={this.renderItem}
keyExtractor={item => item.borrower_id.toString()}
onMoveEnd={({ data }) => this.sortCustomerDetails(data)} />
</View>
........
</ImageBackground>
</Root>
...................
...................
renderItem = ({ item, index, move, moveEnd, isActive }) => {
return (
<TouchableHighlight
onLongPress={move}
onPressOut={moveEnd}
underlayColor="transparent"
onPress={ () => this.viewCustomerDetails(item)}>
<Customer customerDetails={item} />
</TouchableHighlight>
)
}
Customer.js
render() {
return (
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 1, y: 0}}
colors={['#4b2e80', '#583696', '#633da9', '#997cd0']}
style={styles.customerDetailsWrapper}>
<View style={ styles.customerDetails }>
<Text style={styles.borrower_name}>{this.props.customerDetails.name}</Text>
</View>
</LinearGradient>
);
}
Note: i only installed react-native-reanimated
and react-native-linear-gradient
but did not run react-native link as React-Native 0.6+ mention it will link every library automatically. I also wrapped the DraggableFlatList with SafeAreaView and ScrollView. But the result is same.
Please let me know if i missed something.
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 1
- Comments: 18
I had similar problem as dragging was not working. So I changed MainActivity.java with the following marked things now it works perfectly.
It worked for me to put my root inside a
GestureHandlerRootView
. Hope it helps you tooThis did not work for me on Android. I’m using the drag and drop in a modal, but just does not move at all.
Okay, I found kind of a soloution myself: It seems like you shouldn’t change the RootView in MainActivity.java and wrap your App inside a GesturehHandlerRootView (Some libaries like react-native-navigation already have a built-in GestureHandlerRootView).
But besides that my list is still not draggable
EDIT: Fixed it by wrapping my screen in a GestureHandlerRootView
move
inrenderItem
has been replaced bydrag
,onPressOut
is no longer needed, and theonMoveEnd
prop has been replaced byonDragEnd
.Check out the sample code here.
Fixed it by wrapping DraggableFlatList component in GestureHandlerRootView
I confirmed that it works with Expo 37, but it didn’t work with apk. The version used is
Ended up changing this library