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: