Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29610

React native: Using a panResponder inside of a scrollview broken on android

$
0
0

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!


Viewing all articles
Browse latest Browse all 29610

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>