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: