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

Pan Responder simply not working on Android

$
0
0

I am on React Native .61.

I am trying to use a library that uses Pan Responder, and it just is not working.

This is my code:

<Swiper                    ref={this.swiper}                    onSwiped={(cardIndex) => this.onSwiped('general', cardIndex)}                    onSwipedLeft={(cardIndex) => this.onSwiped('left', cardIndex)}                    onSwipedRight={(cardIndex) => this.onSwiped('right', cardIndex)}                    cards={this.state.offers}                    cardIndex={this.state.cardIndex}                    cardVerticalMargin={20}                    infinite={true}                    disableTopSwipe={true}                    disableBottomSwipe={true}                    renderCard={this.renderCard}                    onSwipedAll={this.onSwipedAllCards}                    stackSize={3}                    stackSeparation={15}                    overlayLabels={{                        left: {                            title: 'NOPE',                            style: {                                label: {                                    backgroundColor: 'black',                                    borderColor: 'black',                                    color: 'white',                                    borderWidth: 1                                },                                wrapper: {                                    flexDirection: 'column',                                    alignItems: 'flex-end',                                    justifyContent: 'flex-start',                                    marginTop: 30,                                    marginLeft: -30                                }                            }                        },                        right: {                            title: 'LIKE',                            style: {                                label: {                                    backgroundColor: 'black',                                    borderColor: 'black',                                    color: 'white',                                    borderWidth: 1                                },                                wrapper: {                                    flexDirection: 'column',                                    alignItems: 'flex-start',                                    justifyContent: 'flex-start',                                    marginTop: 30,                                    marginLeft: 30                                }                            }                        },                    }}                    animateOverlayLabelsOpacity                    animateCardOpacity                    swipeBackCard></Swiper><Buttons onSwiped={this.onSwiped} {...this.props} swiper={this.swiper} />

This is pan responder usage inside the module:

initializePanResponder = () => {    this._panResponder = PanResponder.create({      onStartShouldSetPanResponder: (event, gestureState) => true,      onMoveShouldSetPanResponder: (event, gestureState) => true,      onMoveShouldSetPanResponderCapture: (evt, gestureState) => {        const isVerticalSwipe = Math.sqrt(          Math.pow(gestureState.dx, 2) < Math.pow(gestureState.dy, 2)        )        if (!this.props.verticalSwipe && isVerticalSwipe) {          return false        }        return Math.sqrt(Math.pow(gestureState.dx, 2) + Math.pow(gestureState.dy, 2)) > 10      },      onPanResponderGrant: this.onPanResponderGrant,      onPanResponderMove: this.onPanResponderMove,      onPanResponderRelease: this.onPanResponderRelease,      onPanResponderTerminate: this.onPanResponderRelease    })  }onPanResponderGrant = (event, gestureState) => {    this.props.dragStart && this.props.dragStart()    if (!this.state.panResponderLocked) {      this.state.pan.setOffset({        x: this._animatedValueX,        y: this._animatedValueY      })    }    this.state.pan.setValue({      x: 0,      y: 0    })  }onPanResponderMove = (event, gestureState) => {    this.props.onSwiping(this._animatedValueX, this._animatedValueY)    let { overlayOpacityHorizontalThreshold, overlayOpacityVerticalThreshold } = this.props    if (!overlayOpacityHorizontalThreshold) {      overlayOpacityHorizontalThreshold = this.props.horizontalThreshold    }    if (!overlayOpacityVerticalThreshold) {      overlayOpacityVerticalThreshold = this.props.verticalThreshold    }    let isSwipingLeft,      isSwipingRight,      isSwipingTop,      isSwipingBottom    if (Math.abs(this._animatedValueX) > Math.abs(this._animatedValueY) && Math.abs(this._animatedValueX) > overlayOpacityHorizontalThreshold) {      if (this._animatedValueX > 0) isSwipingRight = true      else isSwipingLeft = true    } else if (Math.abs(this._animatedValueY) > Math.abs(this._animatedValueX) && Math.abs(this._animatedValueY) > overlayOpacityVerticalThreshold) {      if (this._animatedValueY > 0) isSwipingBottom = true      else isSwipingTop = true    }    if (isSwipingRight) {      this.setState({ labelType: LABEL_TYPES.RIGHT })    } else if (isSwipingLeft) {      this.setState({ labelType: LABEL_TYPES.LEFT })    } else if (isSwipingTop) {      this.setState({ labelType: LABEL_TYPES.TOP })    } else if (isSwipingBottom) {      this.setState({ labelType: LABEL_TYPES.BOTTOM })    } else {      this.setState({ labelType: LABEL_TYPES.NONE })    }    const { onTapCardDeadZone } = this.props    if (      this._animatedValueX < -onTapCardDeadZone ||      this._animatedValueX > onTapCardDeadZone ||      this._animatedValueY < -onTapCardDeadZone ||      this._animatedValueY > onTapCardDeadZone    ) {      this.setState({        slideGesture: true      })    }    return Animated.event([null, this.createAnimatedEvent()])(      event,      gestureState    )  }  onPanResponderRelease = (e, gestureState) => {    this.props.dragEnd && this.props.dragEnd()    if (this.state.panResponderLocked) {      this.state.pan.setValue({        x: 0,        y: 0      })      this.state.pan.setOffset({        x: 0,        y: 0      })      return    }    const { horizontalThreshold, verticalThreshold } = this.props    const animatedValueX = Math.abs(this._animatedValueX)    const animatedValueY = Math.abs(this._animatedValueY)    const isSwiping =      animatedValueX > horizontalThreshold || animatedValueY > verticalThreshold    if (isSwiping && this.validPanResponderRelease()) {      const onSwipeDirectionCallback = this.getOnSwipeDirectionCallback(        this._animatedValueX,        this._animatedValueY      )      this.swipeCard(onSwipeDirectionCallback)    } else {      this.resetTopCard()    }    if (!this.state.slideGesture) {      this.props.onTapCard(this.state.firstCardIndex)    }    this.setState({      labelType: LABEL_TYPES.NONE,      slideGesture: false    })  }

I've been trying to figure this out all day - for some reason the library just does not work on Android.

I've considered switching it out for another one or writing my own, but I already have my iOS code working and I'm loathe to totally replace it, especially when my guess is that it is a fairly simple Pan Responder issue.

The library in question is this one:

https://github.com/alexbrillant/react-native-deck-swiper


Viewing all articles
Browse latest Browse all 29607

Trending Articles