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!