RN: Migrate ScrollView to NativeComponentRegistry

Summary:
Migrates `ScrollView` (and its related native components) to use `NativeComponentRegistry`. This will enable it to be configured using experiments to conditionally use the native `ViewConfig` or verify the static `ViewConfig`.

This also cleans up a bunch of the modules and types related to defining the native `ScrollView` component.

This also proposes adopting the same module naming protocol was has been adopted for TurboModules (i.e. `NativeScrollView` instead of `ScrollViewNativeComponent`).

Changelog:
[Internal]

Reviewed By: JoshuaGross

Differential Revision: D25098530

fbshipit-source-id: ff1394bfac023daf58e85d5f9068e4f8da3538be

Libraries/Components/ScrollView/NativeAndroidHorizontalScrollContentView.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
+import {type ViewProps as Props} from '../View/ViewPropTypes';
+
+const NativeAndroidHorizontalScrollContentView: HostComponent<Props> = NativeComponentRegistry.get<Props>(
+  'AndroidHorizontalScrollContentView',
+  () => ({
+    uiViewClassName: 'AndroidHorizontalScrollContentView',
+    bubblingEventTypes: {},
+    directEventTypes: {},
+    validAttributes: {},
+  }),
+);
+
+export default NativeAndroidHorizontalScrollContentView;

Libraries/Components/ScrollView/NativeAndroidHorizontalScrollView.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import {type ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
+import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
+
+const NativeAndroidHorizontalScrollView: HostComponent<Props> = NativeComponentRegistry.get<Props>(
+  'AndroidHorizontalScrollView',
+  () => ({
+    uiViewClassName: 'AndroidHorizontalScrollView',
+    bubblingEventTypes: {},
+    directEventTypes: {},
+    validAttributes: {
+      decelerationRate: true,
+      disableIntervalMomentum: true,
+      endFillColor: {process: require('../../StyleSheet/processColor')},
+      fadingEdgeLength: true,
+      nestedScrollEnabled: true,
+      overScrollMode: true,
+      pagingEnabled: true,
+      persistentScrollbar: true,
+      scrollEnabled: true,
+      scrollPerfTag: true,
+      sendMomentumEvents: true,
+      showsHorizontalScrollIndicator: true,
+      snapToEnd: true,
+      snapToInterval: true,
+      snapToStart: true,
+      snapToOffsets: true,
+      contentOffset: true,
+    },
+  }),
+);
+
+export default NativeAndroidHorizontalScrollView;

Libraries/Components/ScrollView/NativeScrollView.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import {type ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
+import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
+
+const NativeScrollView: HostComponent<Props> = NativeComponentRegistry.get<Props>(
+  'RCTScrollView',
+  () => ({
+    uiViewClassName: 'RCTScrollView',
+    bubblingEventTypes: {},
+    directEventTypes: {
+      topScrollToTop: {
+        registrationName: 'onScrollToTop',
+      },
+    },
+    validAttributes: {
+      alwaysBounceHorizontal: true,
+      alwaysBounceVertical: true,
+      automaticallyAdjustContentInsets: true,
+      bounces: true,
+      bouncesZoom: true,
+      canCancelContentTouches: true,
+      centerContent: true,
+      contentInset: {
+        diff: require('../../Utilities/differ/pointsDiffer'),
+      },
+      contentOffset: {
+        diff: require('../../Utilities/differ/pointsDiffer'),
+      },
+      contentInsetAdjustmentBehavior: true,
+      decelerationRate: true,
+      directionalLockEnabled: true,
+      disableIntervalMomentum: true,
+      endFillColor: {
+        process: require('../../StyleSheet/processColor'),
+      },
+      fadingEdgeLength: true,
+      indicatorStyle: true,
+      inverted: true,
+      keyboardDismissMode: true,
+      maintainVisibleContentPosition: true,
+      maximumZoomScale: true,
+      minimumZoomScale: true,
+      nestedScrollEnabled: true,
+      onMomentumScrollBegin: true,
+      onMomentumScrollEnd: true,
+      onScroll: true,
+      onScrollBeginDrag: true,
+      onScrollEndDrag: true,
+      onScrollToTop: true,
+      overScrollMode: true,
+      pagingEnabled: true,
+      persistentScrollbar: true,
+      pinchGestureEnabled: true,
+      scrollEnabled: true,
+      scrollEventThrottle: true,
+      scrollIndicatorInsets: {
+        diff: require('../../Utilities/differ/pointsDiffer'),
+      },
+      scrollPerfTag: true,
+      scrollToOverflowEnabled: true,
+      scrollsToTop: true,
+      sendMomentumEvents: true,
+      showsHorizontalScrollIndicator: true,
+      showsVerticalScrollIndicator: true,
+      snapToAlignment: true,
+      snapToEnd: true,
+      snapToInterval: true,
+      snapToOffsets: true,
+      snapToStart: true,
+      zoomScale: true,
+    },
+  }),
+);
+
+export default NativeScrollView;

Libraries/Components/ScrollView/ScrollView.js

@@ -40,31 +40,30 @@ import type {
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {State as ScrollResponderState} from '../ScrollResponder';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {Props as ScrollViewStickyHeaderProps} from './ScrollViewStickyHeader';
-
+import NativeAndroidHorizontalScrollContentView from './NativeAndroidHorizontalScrollContentView';
+import NativeAndroidHorizontalScrollView from './NativeAndroidHorizontalScrollView';
+import NativeScrollContentView from './NativeScrollContentView';
+import NativeScrollView from './NativeScrollView';
 import ScrollViewContext, {HORIZONTAL, VERTICAL} from './ScrollViewContext';
-import ScrollViewNativeComponent from './ScrollViewNativeComponent';
-import ScrollContentViewNativeComponent from './ScrollContentViewNativeComponent';
-import AndroidHorizontalScrollViewNativeComponent from './AndroidHorizontalScrollViewNativeComponent';
-import AndroidHorizontalScrollContentViewNativeComponent from './AndroidHorizontalScrollContentViewNativeComponent';
+import type {Props as ScrollViewStickyHeaderProps} from './ScrollViewStickyHeader';
 
 const {NativeHorizontalScrollViewTuple, NativeVerticalScrollViewTuple} =
   Platform.OS === 'android'
     ? {
         NativeHorizontalScrollViewTuple: [
-          AndroidHorizontalScrollViewNativeComponent,
-          AndroidHorizontalScrollContentViewNativeComponent,
+          NativeAndroidHorizontalScrollView,
+          NativeAndroidHorizontalScrollContentView,
         ],
-        NativeVerticalScrollViewTuple: [ScrollViewNativeComponent, View],
+        NativeVerticalScrollViewTuple: [NativeScrollView, View],
       }
     : {
         NativeHorizontalScrollViewTuple: [
-          ScrollViewNativeComponent,
-          ScrollContentViewNativeComponent,
+          NativeScrollView,
+          NativeScrollContentView,
         ],
         NativeVerticalScrollViewTuple: [
-          ScrollViewNativeComponent,
-          ScrollContentViewNativeComponent,
+          NativeScrollView,
+          NativeScrollContentView,
         ],
       };
 
@@ -593,7 +592,7 @@ export type Props = $ReadOnly<{|
    * measure, measureLayout, etc.
    */
   scrollViewRef?: React.Ref<
-    typeof ScrollViewNativeComponent & ScrollViewImperativeMethods,
+    typeof NativeScrollView & ScrollViewImperativeMethods,
   >,
 |}>;
 

Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -10,7 +10,6 @@
 
 'use strict';
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
@@ -77,5 +76,3 @@ export type ScrollViewNativeProps = $ReadOnly<{
   onResponderGrant?: ?(e: $FlowFixMe) => void | boolean,
   ...
 }>;
-
-export type ScrollViewNativeComponentType = HostComponent<ScrollViewNativeProps>;

Libraries/Lists/FlatList.js

@@ -19,8 +19,8 @@ const StyleSheet = require('../StyleSheet/StyleSheet');
 
 const invariant = require('invariant');
 
+import typeof NativeScrollView from '../Components/ScrollView/NativeScrollView';
 import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
-import type {ScrollViewNativeComponentType} from '../Components/ScrollView/ScrollViewNativeComponentType.js';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   ViewToken,
@@ -373,7 +373,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
    */
   getNativeScrollRef():
     | ?React.ElementRef<typeof View>
-    | ?React.ElementRef<ScrollViewNativeComponentType> {
+    | ?React.ElementRef<NativeScrollView> {
     if (this._listRef) {
       return this._listRef.getScrollRef();
     }