Cards swiped automatically after swiping first card (After updating to react-native 0.72.0)

[erez-unitronics]

Hi, There is a problem when using this library (v2.0.14) with react-native 0.72.0 (also in 0.72.1) On previous versions of react native there is no problems.

I have a screen with 3 questions (3 cards). I swiped right on the first card and the second card shows which is fine. And now the problem starts: The function 'onSwipedRight' fires automatically when i ONLY tap on the second card and not swiping it right. the rest of the cards (third card and so on) are swiping right automatically even if i don't touch the screen.

Happens on Android and IOS.

Thanks!

[webraptor]

Happy to merge & release if you open a PR with a fix

[dannymandelli]

Been having this same issue since updating.

[arsotech]

Same issue with this guys. Any update on when this will be fixed?

[mohitkale]

Getting same issue on React Native 0.72.x

[harveyappleton]

@webraptor I'm happy to raise PR and fix it if you can point me in the right direction?

[webraptor]

@webraptor I'm happy to raise PR and fix it if you can point me in the right direction?

Unfortunately I actively maintained and added features on the package few years back when we used it for a client. The project ended about 4 years ago so since then I only helped review PRs and publish new versions.

Can’t really allocate the time into it anymore, but if anyone opens a PR with a fix I’ll review and merge.

[arsotech]

Thank you for your response. I ended up recreating the functionality with RN Reanimated which worked well. I'll leave it to anyone else to get in touch if they need to. But for record, the issue started when I upgraded to recent versions of the following packages along with the latest version of deck swiper. The first card swipes fine then instead of the swipe animation, the following cards just replace each other in a very awkward way and there is no animation of the card as you swipe.

"react-native-gesture-handler": "^2.12.0", "react-native-reanimated": "^3.3.0", "expo": "^49.0.0",

[webraptor]

Thank you for your response. I ended up recreating the functionality with RN Reanimated which worked well. I'll leave it to anyone else to get in touch if they need to. But for record, the issue started when I upgraded to recent versions of the following packages along with the latest version of deck swiper. The first card swipes fine then instead of the swipe animation, the following cards just replace each other in a very awkward way and there is no animation of the card as you swipe.

"react-native-gesture-handler": "^2.12.0", "react-native-reanimated": "^3.3.0", "expo": "^49.0.0",

I don't think expo could have triggered the issue. Not sure about the others either since the Swiper's dependencies are react and react native. Most likely there's been a change in how the PanResponder works.

[webraptor]

Hi, There is a problem when using this library (v2.0.14) with react-native 0.72.0 (also in 0.72.1) On previous versions of react native there is no problems.

I have a screen with 3 questions (3 cards). I swiped right on the first card and the second card shows which is fine. And now the problem starts: The function 'onSwipedRight' fires automatically when i ONLY tap on the second card and not swiping it right. the rest of the cards (third card and so on) are swiping right automatically even if i don't touch the screen.

Happens on Android and IOS.

Thanks!

If RN 0.72 is when the issue started, this would be a good place to start looking for the change that affects the swiper: https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0720

[trtin]

Thank you for your response. I ended up recreating the functionality with RN Reanimated which worked well. I'll leave it to anyone else to get in touch if they need to. But for record, the issue started when I upgraded to recent versions of the following packages along with the latest version of deck swiper. The first card swipes fine then instead of the swipe animation, the following cards just replace each other in a very awkward way and there is no animation of the card as you swipe.

"react-native-gesture-handler": "^2.12.0",

"react-native-reanimated": "^3.3.0",

"expo": "^49.0.0",

Can you please share it or folk with the changes? Thank you. @arsotech

[arsotech]

I used a GestureDetector with something like the below for the card and rendered two cards stacked on top of each other. So far, its working well.

    return Gesture.Pan()
      .withRef(cardRef)
      .maxPointers(1)
      .failOffsetX(50)
      .enableTrackpadTwoFingerGesture(true)
      .shouldCancelWhenOutside(true)
      .onUpdate((e) => {
        offsetX.value = e.translationX;
        offsetY.value = e.translationY;
        if (e.translationX > 0 && yesOpacity.value < 1) {
          yesOpacity.value = e.translationX / 100;
        }
        if (e.translationX < 0 && maybeOpacity.value < 1) {
          maybeOpacity.value = -e.translationX / 100;
        }
      })
      .onTouchesCancelled((e) => {
        offsetX.value = withSpring(0);
        offsetY.value = withSpring(0);
        yesOpacity.value = withSpring(0);
        maybeOpacity.value = withSpring(0);
      })
      .onEnd((e) => {
        const absVelocityX = Math.abs(e.velocityX);
        const absDistanceX = Math.abs(e.translationX);
        if (absVelocityX > 500 && absDistanceX > 100) {
          offsetX.value = withSpring(offsetX.value * 3);
          offsetY.value = withSpring(offsetY.value * 3);
          yesOpacity.value = withSpring(0);
          maybeOpacity.value = withSpring(0);
          runOnJS(getNewCard)();
        } else {
          offsetX.value = withSpring(0);
          offsetY.value = withSpring(0);
          yesOpacity.value = withSpring(0);
          maybeOpacity.value = withSpring(0);
        }
      });
  }, []);```

[trtin]

@arsotech thank you for quick response.

[Etx17]

Having the same problem here, after the first swiping in any direction it's fine, but the next one is messy. It's a really cool library. Apparently there is an issue with RN 72 as referenced here : https://github.com/facebook/react-native/issues/38019 But i can't tell if it has a direct impact on this library or not

[Lamonarch87]

Hi Guys,

this is the current resetPanAndScale function.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 }) 
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
}

This is the working one.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 })
    this.state.pan.setOffset({ x: 0, y: 0})
    this._animatedValueX = 0
    this._animatedValueY = 0
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
    this.state.pan.x.addListener(value => this._animatedValueX = value.value)
    this.state.pan.y.addListener(value => this._animatedValueY = value.value)
}

I found that after the swipe, the listener is unsubscribed even if no unmount was triggered.

[hjb48]

Hi Guys,

this is the current resetPanAndScale function.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 }) 
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
}

This is the working one.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 })
    this.state.pan.setOffset({ x: 0, y: 0})
    this._animatedValueX = 0
    this._animatedValueY = 0
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
    this.state.pan.x.addListener(value => this._animatedValueX = value.value)
    this.state.pan.y.addListener(value => this._animatedValueY = value.value)
}

I found that after the swipe, the listener is unsubscribed even if no unmount was triggered.

And this is why @Lamonarch87 is the GOAT 🔥🔥🔥

[webraptor]

Hi Guys,

this is the current resetPanAndScale function.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 }) 
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
}

This is the working one.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 })
    this.state.pan.setOffset({ x: 0, y: 0})
    this._animatedValueX = 0
    this._animatedValueY = 0
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
    this.state.pan.x.addListener(value => this._animatedValueX = value.value)
    this.state.pan.y.addListener(value => this._animatedValueY = value.value)
}

I found that after the swipe, the listener is unsubscribed even if no unmount was triggered.

@Lamonarch87 Can you open a PR and also bump minor version in package json?

[Lamonarch87]

Hi Guys, this is the current resetPanAndScale function.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 }) 
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
}

This is the working one.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 })
    this.state.pan.setOffset({ x: 0, y: 0})
    this._animatedValueX = 0
    this._animatedValueY = 0
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
    this.state.pan.x.addListener(value => this._animatedValueX = value.value)
    this.state.pan.y.addListener(value => this._animatedValueY = value.value)
}

I found that after the swipe, the listener is unsubscribed even if no unmount was triggered.

@Lamonarch87 Can you open a PR and also bump minor version in package json?

I am not that familiar with it, it is my first contribution, but I should have succeeded! Check this out and let me know if it's ok!

[mohitkale]

@webraptor please release the fix so that others can also use it without issues on the latest version of ReactNative 0.72.x

[webraptor]

Fixed by https://github.com/webraptor/react-native-deck-swiper/pull/112#pullrequestreview-1553926364 version 2.0.15