Fabric: ScrollView, the native part

Summary: Note: not all scrollview props and features (especially event listeners and imperative calls) are supported yet.

Reviewed By: fkgozali

Differential Revision: D7961868

fbshipit-source-id: 5277674fe976e089fd963066f78e705ad846d78d

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * `UIScrollView` subclass which has some improvements and tweeks
+ * wich are not directly related to React.
+ */
+@interface RCTEnhancedScrollView : UIScrollView
+
+@property (nonatomic, assign) BOOL pinchGestureEnabled;
+@property (nonatomic, assign) BOOL centerContent;
+
+@end
+
+NS_ASSUME_NONNULL_END

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTEnhancedScrollView.h"
+
+@implementation RCTEnhancedScrollView
+
+@end

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

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * UIView class for <ScrollView> component.
+ */
+@interface RCTScrollViewComponentView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END

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

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTScrollViewComponentView.h"
+
+#import <React/RCTAssert.h>
+#import <fabric/graphics/Geometry.h>
+#import <fabric/scrollview/ScrollViewLocalData.h>
+#import <fabric/scrollview/ScrollViewProps.h>
+
+#import "RCTConversions.h"
+#import "RCTEnhancedScrollView.h"
+
+using namespace facebook::react;
+
+@interface RCTScrollViewComponentView () <UIScrollViewDelegate>
+
+@property (nonatomic, assign) CGFloat scrollEventThrottle;
+
+@end
+
+@implementation RCTScrollViewComponentView {
+  RCTEnhancedScrollView *_Nonnull _scrollView;
+  UIView *_Nonnull _contentView;
+  SharedScrollViewLocalData _scrollViewLocalData;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    _scrollView = [[RCTEnhancedScrollView alloc] initWithFrame:self.bounds];
+    _scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    _scrollView.delegate = self;
+    _scrollView.delaysContentTouches = NO;
+    _contentView = [[UIView alloc] initWithFrame:_scrollView.bounds];
+    [_scrollView addSubview:_contentView];
+    [self addSubview:_scrollView];
+  }
+
+  return self;
+}
+
+- (void)updateProps:(SharedProps)props oldProps:(SharedProps)oldProps
+{
+  [super updateProps:props oldProps:oldProps];
+
+  if (!oldProps) {
+    oldProps = _props ?: std::make_shared<ScrollViewProps>();
+  }
+  _props = props;
+
+  auto oldScrollViewProps = *std::dynamic_pointer_cast<const ScrollViewProps>(oldProps);
+  auto newScrollViewProps = *std::dynamic_pointer_cast<const ScrollViewProps>(props);
+
+#define REMAP_PROP(reactName, localName, target) \
+  if (oldScrollViewProps.reactName != newScrollViewProps.reactName) { \
+    target.localName = newScrollViewProps.reactName; \
+  }
+
+#define REMAP_VIEW_PROP(reactName, localName) REMAP_PROP(reactName, localName, self)
+#define MAP_VIEW_PROP(name) REMAP_VIEW_PROP(name, name)
+#define REMAP_SCROLL_VIEW_PROP(reactName, localName) REMAP_PROP(reactName, localName, _scrollView)
+#define MAP_SCROLL_VIEW_PROP(name) REMAP_SCROLL_VIEW_PROP(name, name)
+
+  // FIXME: Commented props are not supported yet.
+  MAP_SCROLL_VIEW_PROP(alwaysBounceHorizontal);
+  MAP_SCROLL_VIEW_PROP(alwaysBounceVertical);
+  MAP_SCROLL_VIEW_PROP(bounces);
+  MAP_SCROLL_VIEW_PROP(bouncesZoom);
+  MAP_SCROLL_VIEW_PROP(canCancelContentTouches);
+  MAP_SCROLL_VIEW_PROP(centerContent);
+  //MAP_SCROLL_VIEW_PROP(automaticallyAdjustContentInsets);
+  MAP_SCROLL_VIEW_PROP(decelerationRate);
+  MAP_SCROLL_VIEW_PROP(directionalLockEnabled);
+  //MAP_SCROLL_VIEW_PROP(indicatorStyle);
+  //MAP_SCROLL_VIEW_PROP(keyboardDismissMode);
+  MAP_SCROLL_VIEW_PROP(maximumZoomScale);
+  MAP_SCROLL_VIEW_PROP(minimumZoomScale);
+  MAP_SCROLL_VIEW_PROP(scrollEnabled);
+  MAP_SCROLL_VIEW_PROP(pagingEnabled);
+  MAP_SCROLL_VIEW_PROP(pinchGestureEnabled);
+  MAP_SCROLL_VIEW_PROP(scrollsToTop);
+  MAP_SCROLL_VIEW_PROP(showsHorizontalScrollIndicator);
+  MAP_SCROLL_VIEW_PROP(showsVerticalScrollIndicator);
+  MAP_VIEW_PROP(scrollEventThrottle);
+  MAP_SCROLL_VIEW_PROP(zoomScale);
+  //MAP_SCROLL_VIEW_PROP(contentInset);
+  //MAP_SCROLL_VIEW_PROP(scrollIndicatorInsets);
+  //MAP_SCROLL_VIEW_PROP(snapToInterval);
+  //MAP_SCROLL_VIEW_PROP(snapToAlignment);
+}
+
+- (void)updateLocalData:(SharedLocalData)localData
+           oldLocalData:(SharedLocalData)oldLocalData
+{
+  assert(std::dynamic_pointer_cast<const ScrollViewLocalData>(localData));
+  _scrollViewLocalData = std::static_pointer_cast<const ScrollViewLocalData>(localData);
+  CGSize contentSize = RCTCGSizeFromSize(_scrollViewLocalData->getContentSize());
+  _contentView.frame = CGRect {CGPointZero, contentSize};
+  _scrollView.contentSize = contentSize;
+}
+
+#pragma mark - ComponentViewProtocol
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                          index:(NSInteger)index
+{
+  [_contentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                            index:(NSInteger)index
+{
+  RCTAssert(childComponentView.superview == _contentView, @"Attempt to unmount improperly mounted component view.");
+  [childComponentView removeFromSuperview];
+}
+
+@end

ReactCommon/fabric/uimanager/FabricUIManager.cpp

@@ -63,8 +63,7 @@ static const std::string componentNameByReactViewName(std::string viewName) {
   // We need this temporarly for testing purposes until we have proper
   // implementation of <ScrollView> component.
   if (
-    viewName == "ScrollContentView" ||
-    viewName == "ScrollView"
+    viewName == "ScrollContentView"
   ) {
     return "View";
   }

ReactCommon/fabric/uimanager/Scheduler.cpp

@@ -3,11 +3,12 @@
 #include "Scheduler.h"
 
 #include <fabric/core/LayoutContext.h>
+#include <fabric/scrollview/ScrollViewComponentDescriptor.h>
+#include <fabric/text/ParagraphComponentDescriptor.h>
+#include <fabric/text/RawTextComponentDescriptor.h>
+#include <fabric/text/TextComponentDescriptor.h>
 #include <fabric/uimanager/ComponentDescriptorRegistry.h>
 #include <fabric/uimanager/FabricUIManager.h>
-#include <fabric/text/ParagraphComponentDescriptor.h>
-#include <fabric/text/TextComponentDescriptor.h>
-#include <fabric/text/RawTextComponentDescriptor.h>
 #include <fabric/view/ViewComponentDescriptor.h>
 #include <fabric/view/ViewProps.h>
 #include <fabric/view/ViewShadowNode.h>
@@ -20,6 +21,7 @@ namespace react {
 Scheduler::Scheduler() {
   auto componentDescriptorRegistry = std::make_shared<ComponentDescriptorRegistry>();
   componentDescriptorRegistry->registerComponentDescriptor(std::make_shared<ViewComponentDescriptor>());
+  componentDescriptorRegistry->registerComponentDescriptor(std::make_shared<ScrollViewComponentDescriptor>());
   componentDescriptorRegistry->registerComponentDescriptor(std::make_shared<ParagraphComponentDescriptor>());
   componentDescriptorRegistry->registerComponentDescriptor(std::make_shared<TextComponentDescriptor>());
   componentDescriptorRegistry->registerComponentDescriptor(std::make_shared<RawTextComponentDescriptor>());

ReactCommon/fabric/view/ConcreteViewShadowNode.h

@@ -143,7 +143,7 @@ public:
     return list;
   }
 
-private:
+protected:
 
 #pragma mark - LayoutableShadowNode