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();
  }