Fix ScrollView centerContent losing taps and causing jitter on iOS #47591
+39
−26
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.
Summary:
The React Native
<ScrollView>
has a peculiarcenterContent
prop. It solves a common need — keeping the image "centered" while it's not fully zoomed in (but then allowing full panning after it's sufficiently zoomed in).This prop sort of works but it has a few wonky behaviors:
centerContent
implementation hijacks thecontentOffset
setter, but the calling UIKit code does not know it's being hijacked, and so the calling UIKit code thinks it needs to do a momentum animation. This (invisible) momentum animation causes the scroll view to keep eating the tap touches.contentOffset
hijacking stops adjusting values, there will be a sudden visual jump during the pinch. This is because the "real"contentOffset
tracks the accumulated translation from the pinch gesture, and once it gets taken into account with no "correction", the new offset snaps into place.The solution to all of these issues is described here. Instead of hijacking
contentOffset
, it is more reliable to track zooming, child view, and frame changes, and adjustcontentInsets
instead. This solves all three issues:Changelog:
[IOS] [FIXED] - Fixed centerContent losing taps and causing jitter
Test Plan:
I'm extracting this from a patch we're applying to Bluesky. I'll be honest — I have not tested this in isolation, and it likely requires some testing to get merged in. I do not, unfortuntately, have the capacity to do it myself so this is more of a "throw over the wall" kind of patch. Maybe it will be helpful to somebody else.
I've tested these in our real open source app (bluesky-social/social-app#6298). You can reproduce it in any of the lightboxes in the feed or the profile.
Before the fix
Observe the failing tap gestures, sudden jump while pinching, lack of rubber banding.
merged.mov
After the fix
Observe the natural iOS behavior.
IMG_8963.MOV
Unfortunately I do not have the capacity to verify this fix in other scenarios outside of our app.