Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Back navigation gesture is not cancellable (iOS) #6782

Closed
nhuesmann opened this issue Sep 17, 2019 · 6 comments · Fixed by #7700
Closed

Back navigation gesture is not cancellable (iOS) #6782

nhuesmann opened this issue Sep 17, 2019 · 6 comments · Fixed by #7700
Labels
package:stack

Comments

@nhuesmann
Copy link

Current Behavior

  • When I begin a back navigation gesture and then cancel it by returning the screen to the state before the gesture began, the navigation action still fires.

Expected Behavior

  • The navigation should not occur if the user aborts/cancels the gesture.

How to reproduce

  1. Begin at screen A
  2. Navigate forward to screen B
  3. Begin backward navigation swipe gesture to screen A, BUT don't complete the gesture and instead return to screen B. If you let go, even if the UI displays being fully back at screen B, the screen will complete the back navigation on its own (and navigate from B to A).
  4. I’m guessing it just checks the distance the screen has moved and or the velocity of the movement, however it should cancel if the user decides to abort the back gesture.

Your Environment

software version
react-navigation @next
react-native SDK 34
node 10.13.0
yarn 1.12.3

Example

When I cancel the back navigation action, I slide the screen all the way to the edge and let go—the last animation seen in the gif is the one that is fired after I let go of the screen (the one that should not fire)

rn-bug-back-gesture-cancel
@satya164 satya164 transferred this issue from react-navigation/react-navigation Sep 17, 2019
@satya164
Copy link
Member

Can you mention your version of @react-navigation/stack?

@nhuesmann
Copy link
Author

nhuesmann commented Sep 18, 2019 •
edited
Loading

@satya164 Correction, I have the versions:

"@react-navigation/bottom-tabs": "^5.0.0-alpha.7",
"@react-navigation/core": "^5.0.0-alpha.8",
"@react-navigation/native": "^5.0.0-alpha.7",
"@react-navigation/stack": "^5.0.0-alpha.15",

@osdnk
Copy link
Member

osdnk commented Oct 11, 2019

Can you verify if it’s still broken in newest versions?

@nhuesmann
Copy link
Author

@osdnk I will test it soon and let you know! Probably Monday.

@nhuesmann
Copy link
Author

@osdnk yes, verified with the following versions:

"@react-navigation/core": "^5.0.0-alpha.14",
"@react-navigation/native": "^5.0.0-alpha.11",
"@react-navigation/stack": "^5.0.0-alpha.20",

Also, the best way to replicate this is by performing the back gesture quickly. Quickly swipe from left to right until the gesture is almost complete, then swipe back left to cancel the back navigation.

@nhuesmann
Copy link
Author

@osdnk @satya164 I wanted to further clarify my last comment and how to reproduce.

  1. Start the back swipe gesture by swiping from the left edge of the screen to the right. It does not matter how much of the gesture you complete.
  2. Cancel the back navigation by returning the "held" screen back to the left edge.
    Notes:
  • the bug: after returning the screen back to the left edge (cancelling the back navigation), the full back navigation will still fire, complete with animation.
  • parameters: If the initial back swipe gesture had high velocity, the bug will occur. If it was performed with low velocity, the bug will not occur.

I hope this helps!

@satya164 satya164 transferred this issue from react-navigation/navigation-ex Feb 7, 2020
@satya164 satya164 mentioned this issue Feb 12, 2020
Closed
@phamfoo phamfoo mentioned this issue Mar 1, 2020
Merged
satya164 pushed a commit that referenced this issue Mar 16, 2020
@phamfoo
fix: fix back gesture cancellation (#7700)
469d054 
The problem here is that when we scroll back really fast, even though velocity is negative, `Math.abs(translation + velocity * gestureVelocityImpact)` will end up bigger than `distance / 2`.

I removed the `Math.abs`, I think it's not necessary. When `translation + velocity * gestureVelocityImpact` is negative, it's also < `distance / 2` and we should just close the screen.

Closes #6782
joshuapinter pushed a commit to cntral/react-navigation that referenced this issue Sep 29, 2021
@phamfoo
fix: fix back gesture cancellation (react-navigation#7700)
0ab4af9 
The problem here is that when we scroll back really fast, even though velocity is negative, `Math.abs(translation + velocity * gestureVelocityImpact)` will end up bigger than `distance / 2`.

I removed the `Math.abs`, I think it's not necessary. When `translation + velocity * gestureVelocityImpact` is negative, it's also < `distance / 2` and we should just close the screen.

Closes react-navigation#6782
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package:stack
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: fix back gesture cancellation
3 participants
@nhuesmann @satya164 @osdnk