I know this issue has been raised many times but I have not found a working fix on any of the other threads (Most of which have very little to no replies).
In my implementation I have a ScrollView which is a parent to a list of items that each have a panResponder for sideways swiping (Like tinder cards).
The issue I am having is that the ScrollView stops the panResponder mid-animation and prioritizes scrolling.
I have tried dynamically toggling scrollEnabled
on the scrollView on onPanResponderGrant
and onPanResponderRelease
but this is not a viable solution since scrolling vertically on a panResponder triggers onPanResponderGrant
disabling scrolling.
Here is my implementation of panResponder
:
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => false,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => false,
onShouldBlockNativeResponder: (evt, gestureState) => false,
onPanResponderTerminationRequest: () => false,
onPanResponderGrant: (event, gestureState) => {
this.pan.setValue(0);
this.opacity.setValue(0)
this.rotation.setValue(0)
},
onPanResponderMove: (event, gesture) => {
this.pan.setValue(gesture.dx)
this.rotation.setValue(gesture.dx)
this.opacity.setValue(gesture.dx)
},
onPanResponderRelease: (event, gestureState) => {
if(gestureState.dx < -SWIPE_THRESHOLD){
this.removeCard()
} else {
this.resetPosition()
}
}
});
And here is the FlatList that renders each swipable card:
<FlatList
data={this.state.cards}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<DataCard
type={item.type}
name={item.name}
/>
)}
/>
I have since swapped out ScrollView
with a FlatList
with hopes of magically resolving this but no luck.
This functionality works flawlessly on iOS but the issue is still android.
It seems like this is a pretty common issue that has no concrete solution. Which is what Im hoping for by posting this.
Thanks!