From 00e623ddbb61c1af4c6384f5f3d4e07429b53953 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Thu, 19 Nov 2020 15:52:24 -0800 Subject: [PATCH] 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 --- ...izontalScrollContentViewNativeComponent.js | 40 --------- ...roidHorizontalScrollViewNativeComponent.js | 57 ------------ ...ativeAndroidHorizontalScrollContentView.js | 27 ++++++ .../NativeAndroidHorizontalScrollView.js | 45 ++++++++++ ...omponent.js => NativeScrollContentView.js} | 0 .../Components/ScrollView/NativeScrollView.js | 87 +++++++++++++++++++ Libraries/Components/ScrollView/ScrollView.js | 27 +++--- .../ScrollView/ScrollViewNativeComponent.js | 32 ------- .../ScrollViewNativeComponentType.js | 3 - Libraries/Lists/FlatList.js | 4 +- 10 files changed, 174 insertions(+), 148 deletions(-) delete mode 100644 Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js delete mode 100644 Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js create mode 100644 Libraries/Components/ScrollView/NativeAndroidHorizontalScrollContentView.js create mode 100644 Libraries/Components/ScrollView/NativeAndroidHorizontalScrollView.js rename Libraries/Components/ScrollView/{ScrollContentViewNativeComponent.js => NativeScrollContentView.js} (100%) create mode 100644 Libraries/Components/ScrollView/NativeScrollView.js delete mode 100644 Libraries/Components/ScrollView/ScrollViewNativeComponent.js diff --git a/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js b/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js deleted file mode 100644 index fa0a173a4fdcc5..00000000000000 --- a/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * 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. - * - * @format - * @flow - */ - -'use strict'; - -import registerGeneratedViewConfig from '../../Utilities/registerGeneratedViewConfig'; -import requireNativeComponent from '../../ReactNative/requireNativeComponent'; - -import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; -import type {ViewProps} from '../View/ViewPropTypes'; - -const AndroidHorizontalScrollContentViewViewConfig = { - uiViewClassName: 'AndroidHorizontalScrollContentView', - bubblingEventTypes: {}, - directEventTypes: {}, - validAttributes: {}, -}; - -let AndroidHorizontalScrollContentViewNativeComponent; -if (global.RN$Bridgeless) { - registerGeneratedViewConfig( - 'AndroidHorizontalScrollContentView', - AndroidHorizontalScrollContentViewViewConfig, - ); - AndroidHorizontalScrollContentViewNativeComponent = - 'AndroidHorizontalScrollContentView'; -} else { - AndroidHorizontalScrollContentViewNativeComponent = requireNativeComponent( - 'AndroidHorizontalScrollContentView', - ); -} - -export default ((AndroidHorizontalScrollContentViewNativeComponent: any): HostComponent); diff --git a/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js b/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js deleted file mode 100644 index a4a0d4e6bb8dba..00000000000000 --- a/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * 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. - * - * @format - * @flow - */ - -'use strict'; - -import registerGeneratedViewConfig from '../../Utilities/registerGeneratedViewConfig'; -import requireNativeComponent from '../../ReactNative/requireNativeComponent'; - -import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; -import type {ScrollViewNativeProps} from './ScrollViewNativeComponentType'; - -const AndroidHorizontalScrollViewViewConfig = { - 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, - }, -}; - -let AndroidHorizontalScrollViewNativeComponent; -if (global.RN$Bridgeless) { - registerGeneratedViewConfig( - 'AndroidHorizontalScrollView', - AndroidHorizontalScrollViewViewConfig, - ); - AndroidHorizontalScrollViewNativeComponent = 'AndroidHorizontalScrollView'; -} else { - AndroidHorizontalScrollViewNativeComponent = requireNativeComponent( - 'AndroidHorizontalScrollView', - ); -} - -export default ((AndroidHorizontalScrollViewNativeComponent: any): HostComponent); diff --git a/Libraries/Components/ScrollView/NativeAndroidHorizontalScrollContentView.js b/Libraries/Components/ScrollView/NativeAndroidHorizontalScrollContentView.js new file mode 100644 index 00000000000000..1fbb695accc01c --- /dev/null +++ b/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 = NativeComponentRegistry.get( + 'AndroidHorizontalScrollContentView', + () => ({ + uiViewClassName: 'AndroidHorizontalScrollContentView', + bubblingEventTypes: {}, + directEventTypes: {}, + validAttributes: {}, + }), +); + +export default NativeAndroidHorizontalScrollContentView; diff --git a/Libraries/Components/ScrollView/NativeAndroidHorizontalScrollView.js b/Libraries/Components/ScrollView/NativeAndroidHorizontalScrollView.js new file mode 100644 index 00000000000000..328b2f6683299f --- /dev/null +++ b/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 = NativeComponentRegistry.get( + '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; diff --git a/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js b/Libraries/Components/ScrollView/NativeScrollContentView.js similarity index 100% rename from Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js rename to Libraries/Components/ScrollView/NativeScrollContentView.js diff --git a/Libraries/Components/ScrollView/NativeScrollView.js b/Libraries/Components/ScrollView/NativeScrollView.js new file mode 100644 index 00000000000000..a0439bd066146d --- /dev/null +++ b/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 = NativeComponentRegistry.get( + '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; diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 0492c76bf6e60a..dcb204d6c281d8 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/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, >, |}>; diff --git a/Libraries/Components/ScrollView/ScrollViewNativeComponent.js b/Libraries/Components/ScrollView/ScrollViewNativeComponent.js deleted file mode 100644 index 1e1100f0cc3165..00000000000000 --- a/Libraries/Components/ScrollView/ScrollViewNativeComponent.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * 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. - * - * @format - * @flow - */ - -'use strict'; - -import registerGeneratedViewConfig from '../../Utilities/registerGeneratedViewConfig'; -import requireNativeComponent from '../../ReactNative/requireNativeComponent'; -import ScrollViewViewConfig from './ScrollViewViewConfig'; - -import type { - ScrollViewNativeProps, - ScrollViewNativeComponentType, -} from './ScrollViewNativeComponentType'; - -let ScrollViewNativeComponent; -if (global.RN$Bridgeless) { - registerGeneratedViewConfig('RCTScrollView', ScrollViewViewConfig); - ScrollViewNativeComponent = 'RCTScrollView'; -} else { - ScrollViewNativeComponent = requireNativeComponent( - 'RCTScrollView', - ); -} - -export default ((ScrollViewNativeComponent: any): ScrollViewNativeComponentType); diff --git a/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js b/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js index 13af2ed6146c83..405667d1f38059 100644 --- a/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js +++ b/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; diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index d72228d33ceaa2..77c19489f003df 100644 --- a/Libraries/Lists/FlatList.js +++ b/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 extends React.PureComponent, void> { */ getNativeScrollRef(): | ?React.ElementRef - | ?React.ElementRef { + | ?React.ElementRef { if (this._listRef) { return this._listRef.getScrollRef(); }