Fabric: On-demand view mounting for <ScrollView>

Summary: This is the first implementation stage of on-demand child views mounting for <ScrollView> feature. It works this way. When mounting layer requests mounting of a subview of <ScrollView>, the component does not mount it immediately. Instead, it stores it in an internal collection, and then after the transaction finishes use that to mount views that are in a visible area. Then we re-evaluate which child views are should be mounted and unmounted on every significant onScroll event. We use some leeway to do it not so often to save CPU cycles on scrolling. This feature already works fine but to make it shippable we need to integrate it with an `overflow inset` feature to make it 100% reliable in complex cases when some views have overflow content. Changelog: [Internal] Fabric-specific internal change. Reviewed By: sammy-SC Differential Revision: D22304012 fbshipit-source-id: be4ae21378d9d1c457cad2826da7d8c8d6395be5

Author: shergin

React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.h

@@ -7,10 +7,18 @@
 
 #import <UIKit/UIKit.h>
 
+#import <React/RCTDefines.h>
 #import <React/RCTGenericDelegateSplitter.h>
+#import <React/RCTMountingTransactionObserving.h>
 #import <React/RCTScrollableProtocol.h>
 #import <React/RCTViewComponentView.h>
 
+/*
+ * Allows to enable or disable on-demand view mounting feature of ScrollView.
+ * It's an experimental feature that improves performance and memory footprint of huge lists inside ScrollView.
+ */
+RCT_EXTERN void RCTSetEnableOnDemandViewMounting(BOOL value);
+
 NS_ASSUME_NONNULL_BEGIN
 
 /*
@@ -21,7 +29,7 @@ NS_ASSUME_NONNULL_BEGIN
  * keyboard-avoiding functionality and so on. All that complexity must be implemented inside those components in order
  * to keep the complexity of this component manageable.
  */
-@interface RCTScrollViewComponentView : RCTViewComponentView
+@interface RCTScrollViewComponentView : RCTViewComponentView <RCTMountingTransactionObserving>
 
 /*
  * Finds and returns the closet RCTScrollViewComponentView component to the given view

React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

@@ -24,6 +24,8 @@
 
 using namespace facebook::react;
 
+static CGFloat const kClippingLeeway = 44.0;
+
 static void RCTSendPaperScrollEvent_DEPRECATED(UIScrollView *scrollView, NSInteger tag)
 {
  static uint16_t coalescingKey = 0;
@@ -39,6 +41,13 @@ static void RCTSendPaperScrollEvent_DEPRECATED(UIScrollView *scrollView, NSInteg
  [[RCTBridge currentBridge].eventDispatcher sendEvent:scrollEvent];
 }
 
+static BOOL isOnDemandViewMountingEnabledGlobally = NO;
+
+void RCTSetEnableOnDemandViewMounting(BOOL value)
+{
+ isOnDemandViewMountingEnabledGlobally = value;
+}
+
 @interface RCTScrollViewComponentView () <UIScrollViewDelegate, RCTScrollViewProtocol, RCTScrollableProtocol>
 
 @end
@@ -53,6 +62,10 @@ @implementation RCTScrollViewComponentView {
  // This helps to only update state from `scrollViewDidScroll` in case
  // some other part of the system scrolls scroll view.
  BOOL _isUserTriggeredScrolling;
+
+ BOOL _isOnDemandViewMountingEnabled;
+ CGPoint _contentOffsetWhenClipped;
+ NSMutableArray<UIView<RCTComponentViewProtocol> *> *_childComponentViews;
 }
 
 + (RCTScrollViewComponentView *_Nullable)findScrollViewComponentViewForView:(UIView *)view
@@ -69,6 +82,9 @@ - (instancetype)initWithFrame:(CGRect)frame
  static const auto defaultProps = std::make_shared<const ScrollViewProps>();
  _props = defaultProps;
 
+ _isOnDemandViewMountingEnabled = isOnDemandViewMountingEnabledGlobally;
+ _childComponentViews = [[NSMutableArray alloc] init];
+
  _scrollView = [[RCTEnhancedScrollView alloc] initWithFrame:self.bounds];
  _scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
  _scrollView.delaysContentTouches = NO;
@@ -98,6 +114,13 @@ - (void)dealloc
  return ((RCTEnhancedScrollView *)_scrollView).delegateSplitter;
 }
 
+#pragma mark - RCTMountingTransactionObserving
+
+- (void)mountingTransactionDidMountWithMetadata:(MountingTransactionMetadata const &)metadata
+{
+ [self _remountChildren];
+}
+
 #pragma mark - RCTComponentViewProtocol
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -192,13 +215,27 @@ - (void)updateState:(State::Shared const &)state oldState:(State::Shared const &
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
- [_containerView insertSubview:childComponentView atIndex:index];
+ if (_isOnDemandViewMountingEnabled) {
+ [_childComponentViews insertObject:childComponentView atIndex:index];
+ } else {
+ [_containerView insertSubview:childComponentView atIndex:index];
+ }
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
- RCTAssert(childComponentView.superview == _containerView, @"Attempt to unmount improperly mounted component view.");
- [childComponentView removeFromSuperview];
+ if (_isOnDemandViewMountingEnabled) {
+ RCTAssert(
+ [_childComponentViews objectAtIndex:index] == childComponentView,
+ @"Attempt to unmount improperly mounted component view.");
+ [_childComponentViews removeObjectAtIndex:index];
+ // In addition to removing a view from `_childComponentViews`,
+ // we have to unmount views immediately to not mess with recycling.
+ [childComponentView removeFromSuperview];
+ } else {
+ RCTAssert(childComponentView.superview == _containerView, @"Attempt to unmount improperly mounted component view.");
+ [childComponentView removeFromSuperview];
+ }
 }
 
 - (ScrollViewMetrics)_scrollViewMetrics
@@ -241,18 +278,19 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  if (!_isUserTriggeredScrolling) {
  [self _updateStateWithContentOffset];
  }
- if (!_eventEmitter) {
- return;
- }
 
  NSTimeInterval now = CACurrentMediaTime();
  if ((_lastScrollEventDispatchTime == 0) || (now - _lastScrollEventDispatchTime > _scrollEventThrottle)) {
  _lastScrollEventDispatchTime = now;
- std::static_pointer_cast<ScrollViewEventEmitter const>(_eventEmitter)->onScroll([self _scrollViewMetrics]);
+ if (_eventEmitter) {
+ std::static_pointer_cast<ScrollViewEventEmitter const>(_eventEmitter)->onScroll([self _scrollViewMetrics]);
+ }
  // Once Fabric implements proper NativeAnimationDriver, this should be removed.
  // This is just a workaround to allow animations based on onScroll event.
  RCTSendPaperScrollEvent_DEPRECATED(scrollView, self.tag);
  }
+
+ [self _remountChildrenIfNeeded];
 }
 
 - (void)scrollViewDidZoom:(UIScrollView *)scrollView
@@ -395,6 +433,66 @@ - (void)scrollToEnd:(BOOL)animated
  [_scrollView setContentOffset:offset animated:animated];
 }
 
+#pragma mark - Child views mounting
+
+- (void)_remountChildrenIfNeeded
+{
+ if (!_isOnDemandViewMountingEnabled) {
+ return;
+ }
+
+ CGPoint contentOffset = _scrollView.contentOffset;
+
+ if (std::abs(_contentOffsetWhenClipped.x - contentOffset.x) < kClippingLeeway &&
+ std::abs(_contentOffsetWhenClipped.y - contentOffset.y) < kClippingLeeway) {
+ return;
+ }
+
+ _contentOffsetWhenClipped = contentOffset;
+
+ [self _remountChildren];
+}
+
+- (void)_remountChildren
+{
+ if (!_isOnDemandViewMountingEnabled) {
+ return;
+ }
+
+ CGRect containerFrame = CGRect{CGPointZero, _scrollView.bounds.size};
+ containerFrame = UIEdgeInsetsInsetRect(containerFrame, _scrollView.contentInset);
+ containerFrame.origin = _scrollView.contentOffset;
+
+ NSInteger mountedIndex = 0;
+ for (UIView *componentView in _childComponentViews) {
+ BOOL shouldBeMounted = YES;
+ BOOL isMounted = componentView.superview != nil;
+
+ // If a view is mounted, it must be mounted exactly at `mountedIndex` position.
+ RCTAssert(
+ !isMounted || [_containerView.subviews objectAtIndex:mountedIndex] == componentView,
+ @"Attempt to unmount improperly mounted component view.");
+
+ // It's simpler and faster to not mess with views that are not `RCTViewComponentView` subclasses.
+ if ([componentView isKindOfClass:[RCTViewComponentView class]]) {
+ CGRect viewFrameWithLeeway = CGRectInset(componentView.frame, -kClippingLeeway, -kClippingLeeway);
+ shouldBeMounted = CGRectIntersectsRect(containerFrame, viewFrameWithLeeway);
+ }
+
+ if (shouldBeMounted != isMounted) {
+ if (shouldBeMounted) {
+ [_containerView insertSubview:componentView atIndex:mountedIndex];
+ } else {
+ [componentView removeFromSuperview];
+ }
+ }
+
+ if (shouldBeMounted) {
+ mountedIndex++;
+ }
+ }
+}
+
 #pragma mark - RCTScrollableProtocol
 
 - (CGSize)contentSize