Repository navigation
fix: drive horizontal scrolling with a pan gesture (Android flicker) - #2
Merged
Merged
Conversation
Android implements zIndex by reordering views at draw time, which can flicker while a transform animates. The pinned group is now the last child of the row and header, positioned absolutely over a spacer, so it draws on top without reordering.
The body scrolled in a native ScrollView while the header and pinned columns were positioned from a Reanimated value fed by scroll events. On Android the two do not land in the same frame, so the pinned columns drifted and snapped back, which read as flicker. A pan gesture now drives one shared value that positions the rows, the header and the pinned columns in the same frame. Adds react-native-gesture-handler as a peer dependency; apps must wrap their root in GestureHandlerRootView. Measured on the Android emulator with a frame detector that flags frames jumping away from both neighbours while the neighbours match: 7 such frames before the change, 0 after, over the same swipe sequence.
ahmdshrif
changed the title
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
1 participant
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.
Fixes #3
Cause
The body scrolled in a native
ScrollView, while the header and pinned columns were positioned from a Reanimated value fed by that ScrollView's scroll events. On Android the two do not land in the same frame, so the pinned columns drift from the rows and snap back on the next frame. iOS keeps them in sync, which matches the report being Android-only.A frame from the reporter's recording shows the pinned columns shifted right, with the Amount column visible to their left, while the frames on either side are correct.
Fix
A pan gesture drives one shared value. The rows, the header and the pinned columns all read it in the same frame, so they cannot disagree.
react-native-gesture-handleras a peer dependency; apps wrap their root inGestureHandlerRootView(README updated).An earlier commit on this branch removed
zIndexfrom the pinned group, which was a real Android drawing-order hazard but not the cause of this bug. It is kept because the absolute-overlay layout is what the pan approach builds on.Testing
A detector flags frames that jump away from both neighbours while those neighbours match each other, which is what a flicker looks like: