Fix Safari iOS swipe-back gesture causing screen flicker#87183
Closed
Beamanator wants to merge 1 commit intomainfrom
Closed
Fix Safari iOS swipe-back gesture causing screen flicker#87183Beamanator wants to merge 1 commit intomainfrom
Beamanator wants to merge 1 commit intomainfrom
Conversation
Refines the edgeDragGestureMonitor to detect left-to-right swipes by tracking touchStartPositionX and comparing it against touchend pageX. This replaces the previous approach that checked for pageX < 0, which was unreliable on newer Safari versions. The new approach also removes the `resetExpectingTouchendWithDelay` complexity, making the detection simpler and more accurate. Fixes #75905 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Explanation of Change
Refines the
edgeDragGestureMonitorpatch for@react-navigation/stackto more reliably detect iOS Safari swipe-back gestures.Root cause: When a user swipes from the left edge in Safari iOS to navigate back in browser history, the React Navigation spring animation briefly renders the previous screen before completing, causing a visible flicker.
Previous approach: Detected the gesture by checking if
touchend.pageX < 0(negative x coordinate). This was unreliable on newer Safari versions where the coordinate is not negative.New approach: Records
touchStartPositionXontouchstart, then compares againsttouchend.pageX. A left-to-right swipe with > 20px travel is classified as an edge gesture. When detected, the animation switches from spring to timing withduration: 0, making the transition instant and eliminating the flicker.This also removes the
resetExpectingTouchendWithDelayfunction and theexpectingTouchendstate variable, simplifying the implementation.Fixed Issues
$ #75905
PROPOSAL:
Tests
Offline tests
This change only affects navigation animations. Offline behavior is unaffected — navigation still works the same way offline.
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
N/A - this fix is specific to iOS Safari (mWeb)
Android: mWeb Chrome
N/A - this fix is specific to iOS Safari (mWeb)
iOS: Native
N/A - this fix is specific to iOS Safari (mWeb)
iOS: mWeb Safari
MacOS: Chrome / Safari
N/A - this fix is specific to iOS Safari touch gestures