webraptor / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
126 stars 81 forks source link

Cards drift off to one side after swipe when loading next #30

Closed psychosoft closed 4 months ago

psychosoft commented 3 years ago

Once in a while [UPDATE] :::Only happens when swiping fast, ie. putting down the finger on the screen before the rendering of the next card is complete.:::

when swiping cards if you put down your finger on the screen again fast enough, the new card is rendered with an offset of (card center + touch position). After each new swipe the next card drifts more in the same direction on load. After 3-4 new cards the new loading position is completely off screen and there is no way to continue swiping. When the new cards begin to offset, if you swipe it in a disabled direction, it bounces back and it seems to reset the position.

This never happen if swipe methods are called programmatically on ref.

My guess is that the glitch is in the setting of new card render position after successful swipe, when putting the finger on the screen too swiftly after the swipe.

On swipe to disabled direction the card animates back to center, so there is obviously another algorithm for setting the position when swiping to disabled direction.

Only when swiping manually. Android. Not Web. Ios not tested.

Images below shows the position after swipe when new card is loaded.

Screenshot_20201001-000244_Expo Screenshot_20201001-000251_Expo

webraptor commented 3 years ago

@psychosoft images cannot be opened. Please post them directly in github, not in google drive

ali14a commented 3 years ago

Still facing this issue. is there any solution? or a way to reset card's postition onSwipe.

servonlewis commented 3 years ago

I am having this issue as well on iOS. Came across it when testing and was swiping real fast to see what I render when there are no cards.

cristian-milea commented 3 years ago

I tried to implement a timeout between swipes to prevent spamming but still happens

cristian-milea commented 3 years ago

@webraptor , After a lot of tries I think I discovered what triggers the bug. Swipe a card, release it and while it "flies" offscreen, catch it and throw it again. The next card in stack will initialize on the "catched" position.

Also, Salut!

cristian-milea commented 3 years ago

Got a temporary workaround for this bug, setting the initial position when dragging always to 0,0 (I think)

@@ -204,8 +204,8 @@ class Swiper extends Component {
     this.props.dragStart && this.props.dragStart()
     if (!this.state.panResponderLocked) {
       this.state.pan.setOffset({
-        x: this._animatedValueX,
-        y: this._animatedValueY
+        x: 0,
+        y: 0
       })
     }
vuciv commented 3 years ago

@cristian-milea This worked like a charm, thank you!!

andrelfnavarro commented 3 years ago

@cristian-milea saved my life, thanks!!!

TahaAttari commented 3 years ago

Can we close this? Solution works and seems easy to make an update