react-navigation / react-navigation/react-navigation
Swipe to go back gesture on IOS web jitters
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
To reproduce this effect, you will need to run this snack on an IOS Simulator or an actual Iphone
Note: If you want to run this project locally, you will need to manually install "react-native-web": "~0.18.9", "react-dom": "18.1.0" packages
If we try to run this project on IOS safari (using an emulator or an actual Iphone) and try to use the swipe to go back gesture, we can see that the animation jitters most of the times. As soon as I lift the finger to let the screen slide, the screen continues to slide to the right, but near the end the screen moves a little left and it causes a jittery effect and doesn't look good.
Here's the video showing this effect as well:
(Look at the end of the video where the effect is clearly visible)
Expected behavior
The animation should complete smoothly and there shouldn't be a flicker on the device when it completes.
Reproduction
https://snack.expo.dev/@bg2010/gesture-react-native
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
- react-native-tab-view
Environment
| package | version |
|---|---|
| react | 18.1.0 |
| react-dom | 18.1.0 |
| react-native | 0.70.5 |
| react-native-web | ~0.18.9 |
| @react-navigation/native | ~6.1.6 |
| @react-navigation/stack | ~6.3.16 |
| react-native-safe-area-context | 4.4.1 |
| react-native-screens | ~3.18.0 |
| react-native-gesture-handler | ~2.8.0 |
| react-native-reanimated | ~2.12.0 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked Expo Snack on an iOS Simulator or iPhone and reproduce the stack swipe-back animation in Safari. Trace the @react-navigation/stack gesture and animation behavior, then verify that the transition completes without the reported end-of-gesture jitter on iOS and web.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react, react-native
- Domain
- frontend, mobile-dev, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100