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

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 28480

Trending Articles