Fix ScrollView centerContent losing taps and causing jitter on iOS

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm

@@ -67,28 +67,51 @@ - (void)preserveContentOffsetWithBlock:(void (^)())block
  * ScrollView, we force it to be centered, but when you zoom or the content otherwise
  * becomes larger than the ScrollView, there is no padding around the content but it
  * can still fill the whole view.
+ * This implementation is based on https://petersteinberger.com/blog/2013/how-to-center-uiscrollview/.
  */
-- (void)setContentOffset:(CGPoint)contentOffset
+-(void)centerContentIfNeeded
 {
-  if (_isSetContentOffsetDisabled) {
+  if (!_centerContent) {
     return;
   }
 
-  if (_centerContent && !CGSizeEqualToSize(self.contentSize, CGSizeZero)) {
-    CGSize scrollViewSize = self.bounds.size;
-    if (self.contentSize.width <= scrollViewSize.width) {
-      contentOffset.x = -(scrollViewSize.width - self.contentSize.width) / 2.0;
-    }
-    if (self.contentSize.height <= scrollViewSize.height) {
-      contentOffset.y = -(scrollViewSize.height - self.contentSize.height) / 2.0;
-    }
+  CGSize contentSize = self.contentSize;
+  CGSize boundsSize = self.bounds.size;
+  if (CGSizeEqualToSize(contentSize, CGSizeZero) ||
+      CGSizeEqualToSize(boundsSize, CGSizeZero)) {
+    return;
   }
 
+  CGFloat top = 0, left = 0;
+  if (contentSize.width < boundsSize.width) {
+    left = (boundsSize.width - contentSize.width) * 0.5f;
+  }
+  if (contentSize.height < boundsSize.height) {
+    top = (boundsSize.height - contentSize.height) * 0.5f;
+  }
+  self.contentInset = UIEdgeInsetsMake(top, left, top, left);
+}
+
+- (void)setContentOffset:(CGPoint)contentOffset
+{
+  if (_isSetContentOffsetDisabled) {
+    return;
+  }
   super.contentOffset = CGPointMake(
       RCTSanitizeNaNValue(contentOffset.x, @"scrollView.contentOffset.x"),
       RCTSanitizeNaNValue(contentOffset.y, @"scrollView.contentOffset.y"));
 }
 
+- (void)setFrame:(CGRect)frame {
+  [super setFrame:frame];
+  [self centerContentIfNeeded];
+}
+
+- (void)didAddSubview:(UIView *)subview {
+  [super didAddSubview:subview];
+  [self centerContentIfNeeded];
+}
+
 - (BOOL)touchesShouldCancelInContentView:(UIView *)view
 {
   if ([_overridingDelegate respondsToSelector:@selector(touchesShouldCancelInContentView:)]) {
@@ -258,6 +281,10 @@ - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
   }
 }
 
+- (void)scrollViewDidZoom:(__unused UIScrollView *)scrollView {
+  [self centerContentIfNeeded];
+}
+
 #pragma mark -
 
 - (BOOL)isHorizontal:(UIScrollView *)scrollView

packages/react-native/React/Views/ScrollView/RCTScrollView.m

@@ -159,26 +159,8 @@ - (BOOL)touchesShouldCancelInContentView:(__unused UIView *)view
   return !shouldDisableScrollInteraction;
 }
 
-/*
- * Automatically centers the content such that if the content is smaller than the
- * ScrollView, we force it to be centered, but when you zoom or the content otherwise
- * becomes larger than the ScrollView, there is no padding around the content but it
- * can still fill the whole view.
- */
 - (void)setContentOffset:(CGPoint)contentOffset
 {
-  UIView *contentView = [self contentView];
-  if (contentView && _centerContent && !CGSizeEqualToSize(contentView.frame.size, CGSizeZero)) {
-    CGSize subviewSize = contentView.frame.size;
-    CGSize scrollViewSize = self.bounds.size;
-    if (subviewSize.width <= scrollViewSize.width) {
-      contentOffset.x = -(scrollViewSize.width - subviewSize.width) / 2.0;
-    }
-    if (subviewSize.height <= scrollViewSize.height) {
-      contentOffset.y = -(scrollViewSize.height - subviewSize.height) / 2.0;
-    }
-  }
-
   super.contentOffset = CGPointMake(
       RCTSanitizeNaNValue(contentOffset.x, @"scrollView.contentOffset.x"),
       RCTSanitizeNaNValue(contentOffset.y, @"scrollView.contentOffset.y"));
@@ -433,6 +415,11 @@ - (void)setRemoveClippedSubviews:(__unused BOOL)removeClippedSubviews
   // Does nothing
 }
 
+- (void)setFrame:(CGRect)frame {
+  [super setFrame:frame];
+  [self centerContentIfNeeded];
+}
+
 - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
 {
   [super insertReactSubview:view atIndex:atIndex];
@@ -450,6 +437,8 @@ - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
     RCTApplyTransformationAccordingLayoutDirection(_contentView, self.reactLayoutDirection);
     [_scrollView addSubview:view];
   }
+
+  [self centerContentIfNeeded];
 }
 
 - (void)removeReactSubview:(UIView *)subview
@@ -664,9 +653,46 @@ -(void)delegateMethod : (UIScrollView *)scrollView        \
   }
 
 RCT_SCROLL_EVENT_HANDLER(scrollViewWillBeginDecelerating, onMomentumScrollBegin)
-RCT_SCROLL_EVENT_HANDLER(scrollViewDidZoom, onScroll)
 RCT_SCROLL_EVENT_HANDLER(scrollViewDidScrollToTop, onScrollToTop)
 
+-(void)scrollViewDidZoom : (UIScrollView *)scrollView
+{
+  [self centerContentIfNeeded];
+
+  RCT_SEND_SCROLL_EVENT(onScroll, nil);
+  RCT_FORWARD_SCROLL_EVENT(scrollViewDidZoom : scrollView);
+}
+
+/*
+ * Automatically centers the content such that if the content is smaller than the
+ * ScrollView, we force it to be centered, but when you zoom or the content otherwise
+ * becomes larger than the ScrollView, there is no padding around the content but it
+ * can still fill the whole view.
+ * This implementation is based on https://petersteinberger.com/blog/2013/how-to-center-uiscrollview/.
+ */
+-(void)centerContentIfNeeded
+{
+  if (!_scrollView.centerContent) {
+    return;
+  }
+
+  CGSize contentSize = self.contentSize;
+  CGSize boundsSize = self.bounds.size;
+  if (CGSizeEqualToSize(contentSize, CGSizeZero) ||
+      CGSizeEqualToSize(boundsSize, CGSizeZero)) {
+    return;
+  }
+
+  CGFloat top = 0, left = 0;
+  if (contentSize.width < boundsSize.width) {
+    left = (boundsSize.width - contentSize.width) * 0.5f;
+  }
+  if (contentSize.height < boundsSize.height) {
+    top = (boundsSize.height - contentSize.height) * 0.5f;
+  }
+  _scrollView.contentInset = UIEdgeInsetsMake(top, left, top, left);
+}
+
 - (void)addScrollListener:(NSObject<UIScrollViewDelegate> *)scrollListener
 {
   [_scrollListeners addObject:scrollListener];
@@ -945,6 +971,7 @@ - (void)updateContentSizeIfNeeded
   CGSize contentSize = self.contentSize;
   if (!CGSizeEqualToSize(_scrollView.contentSize, contentSize)) {
     _scrollView.contentSize = contentSize;
+    [self centerContentIfNeeded];
   }
 }