From 34efaab3a8b218997c962e85229ff2724051e61f Mon Sep 17 00:00:00 2001 From: Gijs Weterings Date: Sat, 11 Dec 2021 06:56:23 -0800 Subject: [PATCH] Back out "Fix Static View Config for RCTView" Summary: Changelog: [internal] Reviewed By: arushikesarwani94 Differential Revision: D33042498 fbshipit-source-id: 42667f0fb17d502494139645a42dc54dea9904b7 --- .../View/ReactNativeViewViewConfig.js | 140 +++++++----------- .../View/ReactNativeViewViewConfigAndroid.js | 83 +++++++++++ .../Components/View/ViewNativeComponent.js | 10 +- .../StaticViewConfigValidator.js | 6 +- Libraries/NativeComponent/ViewConfigIgnore.js | 27 ---- 5 files changed, 145 insertions(+), 121 deletions(-) create mode 100644 Libraries/Components/View/ReactNativeViewViewConfigAndroid.js delete mode 100644 Libraries/NativeComponent/ViewConfigIgnore.js diff --git a/Libraries/Components/View/ReactNativeViewViewConfig.js b/Libraries/Components/View/ReactNativeViewViewConfig.js index e50061ba73..6406b6ec7f 100644 --- a/Libraries/Components/View/ReactNativeViewViewConfig.js +++ b/Libraries/Components/View/ReactNativeViewViewConfig.js @@ -9,54 +9,17 @@ */ import type {ViewConfig} from '../../Renderer/shims/ReactNativeTypes'; -import {DynamicallyInjectedByGestureHandler} from '../../NativeComponent/ViewConfigIgnore'; +import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid'; import {Platform} from 'react-native'; -const ReactNativeViewViewConfigAndroid = { - bubblingEventTypes: {}, - directEventTypes: { - topAccessibilityAction: { - registrationName: 'onAccessibilityAction', - }, - topPointerEnter: { - registrationName: 'pointerenter', - }, - topPointerLeave: { - registrationName: 'pointerleave', - }, - topPointerMove: { - registrationName: 'pointermove', - }, - }, - validAttributes: { - elevation: true, - hasTVPreferredFocus: true, - focusable: true, - nativeBackgroundAndroid: true, - nativeForegroundAndroid: true, - nextFocusDown: true, - nextFocusForward: true, - nextFocusLeft: true, - nextFocusRight: true, - nextFocusUp: true, - renderToHardwareTextureAndroid: true, - translateX: true, - scaleX: true, - scaleY: true, - importantForAccessibility: true, - accessibilityLiveRegion: true, - rotation: true, - translateY: true, - transform: true, - hitSlop: true, - pointerenter: true, - pointerleave: true, - pointermove: true, - }, -}; - -const ReactNativeViewViewConfigIOS = { +const ReactNativeViewConfig: ViewConfig = { + uiViewClassName: 'RCTView', + baseModuleName: null, + Manager: 'ViewManager', + Commands: {}, + Constants: {}, bubblingEventTypes: { + ...ReactNativeViewViewConfigAndroid.bubblingEventTypes, topBlur: { phasedRegistrationNames: { bubbled: 'onBlur', @@ -125,6 +88,7 @@ const ReactNativeViewViewConfigIOS = { }, }, directEventTypes: { + ...ReactNativeViewViewConfigAndroid.directEventTypes, topAccessibilityAction: { registrationName: 'onAccessibilityAction', }, @@ -140,56 +104,36 @@ const ReactNativeViewViewConfigIOS = { topMagicTap: { registrationName: 'onMagicTap', }, - }, - validAttributes: { - accessibilityElementsHidden: true, - accessibilityIgnoresInvertColors: true, - accessibilityViewIsModal: true, - direction: true, - onAccessibilityAction: true, - onAccessibilityEscape: true, - onAccessibilityTap: true, - onMagicTap: true, - shadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')}, - shadowOpacity: true, - shadowRadius: true, - shouldRasterizeIOS: true, - transform: {diff: require('../../Utilities/differ/matricesDiffer')}, - hitSlop: {diff: require('../../Utilities/differ/insetsDiffer')}, - }, -}; - -const PlatformSpecificViewConfig = - Platform.OS === 'android' - ? ReactNativeViewViewConfigAndroid - : ReactNativeViewViewConfigIOS; - -const ReactNativeViewConfig: ViewConfig = { - uiViewClassName: 'RCTView', - baseModuleName: null, - Manager: 'ViewManager', - Commands: {}, - Constants: {}, - bubblingEventTypes: PlatformSpecificViewConfig.bubblingEventTypes, - directEventTypes: { - ...PlatformSpecificViewConfig.directEventTypes, + topPointerEnter: { + registrationName: 'pointerenter', + }, + topPointerLeave: { + registrationName: 'pointerleave', + }, + topPointerMove: { + registrationName: 'pointermove', + }, // Events for react-native-gesture-handler (T45765076) // Remove once this library can handle JS View Configs - onGestureHandlerEvent: DynamicallyInjectedByGestureHandler({ + onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent', - }), - onGestureHandlerStateChange: DynamicallyInjectedByGestureHandler({ + }, + onGestureHandlerStateChange: { registrationName: 'onGestureHandlerStateChange', - }), + }, }, validAttributes: { - ...PlatformSpecificViewConfig.validAttributes, + ...ReactNativeViewViewConfigAndroid.validAttributes, accessibilityActions: true, + accessibilityElementsHidden: true, accessibilityHint: true, + accessibilityIgnoresInvertColors: true, accessibilityLabel: true, + accessibilityLiveRegion: true, accessibilityRole: true, accessibilityState: true, accessibilityValue: true, + accessibilityViewIsModal: true, accessible: true, alignContent: true, alignItems: true, @@ -222,8 +166,11 @@ const ReactNativeViewConfig: ViewConfig = { borderTopWidth: true, borderWidth: true, bottom: true, + clickable: true, collapsable: true, + direction: true, display: true, + elevation: true, end: true, flex: true, flexBasis: true, @@ -232,6 +179,8 @@ const ReactNativeViewConfig: ViewConfig = { flexShrink: true, flexWrap: true, height: true, + hitSlop: {diff: require('../../Utilities/differ/insetsDiffer')}, + importantForAccessibility: true, justifyContent: true, left: true, margin: true, @@ -252,7 +201,11 @@ const ReactNativeViewConfig: ViewConfig = { onAccessibilityAction: true, onAccessibilityEscape: true, onAccessibilityTap: true, + pointerenter: true, + pointerleave: true, + pointermove: true, onLayout: true, + onMagicTap: true, opacity: true, overflow: true, padding: true, @@ -267,8 +220,16 @@ const ReactNativeViewConfig: ViewConfig = { pointerEvents: true, position: true, removeClippedSubviews: true, + renderToHardwareTextureAndroid: true, right: true, + rotation: true, + scaleX: true, + scaleY: true, shadowColor: {process: require('../../StyleSheet/processColor')}, + shadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')}, + shadowOpacity: true, + shadowRadius: true, + shouldRasterizeIOS: true, start: true, style: { alignContent: true, @@ -372,9 +333,10 @@ const ReactNativeViewConfig: ViewConfig = { textTransform: true, tintColor: {process: require('../../StyleSheet/processColor')}, top: true, - transform: { - process: require('../../StyleSheet/processTransform'), - }, + transform: + Platform.OS === 'ios' + ? {diff: require('../../Utilities/differ/matricesDiffer')} + : {process: require('../../StyleSheet/processTransform')}, transformMatrix: true, translateX: true, translateY: true, @@ -384,6 +346,12 @@ const ReactNativeViewConfig: ViewConfig = { }, testID: true, top: true, + transform: + Platform.OS === 'ios' + ? {diff: require('../../Utilities/differ/matricesDiffer')} + : {process: require('../../StyleSheet/processTransform')}, + translateX: true, + translateY: true, width: true, zIndex: true, }, diff --git a/Libraries/Components/View/ReactNativeViewViewConfigAndroid.js b/Libraries/Components/View/ReactNativeViewViewConfigAndroid.js new file mode 100644 index 0000000000..ad2542dfa2 --- /dev/null +++ b/Libraries/Components/View/ReactNativeViewViewConfigAndroid.js @@ -0,0 +1,83 @@ +/** + * 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'; + +const ReactNativeViewViewConfigAndroid = { + uiViewClassName: 'RCTView', + bubblingEventTypes: { + topSelect: { + phasedRegistrationNames: { + bubbled: 'onSelect', + captured: 'onSelectCapture', + }, + }, + topAssetDidLoad: { + phasedRegistrationNames: { + bubbled: 'onAssetDidLoad', + captured: 'onAssetDidLoadCapture', + }, + }, + }, + directEventTypes: { + topClick: { + registrationName: 'onClick', + }, + topContentSizeChange: { + registrationName: 'onContentSizeChange', + }, + topLoadingError: { + registrationName: 'onLoadingError', + }, + topLoadingFinish: { + registrationName: 'onLoadingFinish', + }, + topLoadingStart: { + registrationName: 'onLoadingStart', + }, + topMessage: { + registrationName: 'onMessage', + }, + topMomentumScrollBegin: { + registrationName: 'onMomentumScrollBegin', + }, + topMomentumScrollEnd: { + registrationName: 'onMomentumScrollEnd', + }, + topScroll: { + registrationName: 'onScroll', + }, + topScrollBeginDrag: { + registrationName: 'onScrollBeginDrag', + }, + topScrollEndDrag: { + registrationName: 'onScrollEndDrag', + }, + topSelectionChange: { + registrationName: 'onSelectionChange', + }, + onAssetDidLoad: { + registrationName: 'onAssetDidLoad', + }, + }, + validAttributes: { + hasTVPreferredFocus: true, + focusable: true, + nativeBackgroundAndroid: true, + nativeForegroundAndroid: true, + nextFocusDown: true, + nextFocusForward: true, + nextFocusLeft: true, + nextFocusRight: true, + nextFocusUp: true, + }, +}; + +module.exports = ReactNativeViewViewConfigAndroid; diff --git a/Libraries/Components/View/ViewNativeComponent.js b/Libraries/Components/View/ViewNativeComponent.js index 1ec0745f3f..a38c2a0a3b 100644 --- a/Libraries/Components/View/ViewNativeComponent.js +++ b/Libraries/Components/View/ViewNativeComponent.js @@ -10,14 +10,18 @@ import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry'; import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes'; +import Platform from '../../Utilities/Platform'; import codegenNativeCommands from '../../Utilities/codegenNativeCommands'; +import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid'; import {type ViewProps as Props} from './ViewPropTypes'; import * as React from 'react'; const ViewNativeComponent: HostComponent = - NativeComponentRegistry.get('RCTView', () => ({ - uiViewClassName: 'RCTView', - })); + NativeComponentRegistry.get('RCTView', () => + Platform.OS === 'android' + ? ReactNativeViewViewConfigAndroid + : {uiViewClassName: 'RCTView'}, + ); interface NativeCommands { +hotspotUpdate: ( diff --git a/Libraries/NativeComponent/StaticViewConfigValidator.js b/Libraries/NativeComponent/StaticViewConfigValidator.js index ddc229472d..6aa70649a5 100644 --- a/Libraries/NativeComponent/StaticViewConfigValidator.js +++ b/Libraries/NativeComponent/StaticViewConfigValidator.js @@ -9,7 +9,6 @@ */ import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes'; -import {isIgnored} from './ViewConfigIgnore'; type Difference = | { @@ -145,10 +144,7 @@ function accumulateDifferences( } for (const staticKey in staticObject) { - if ( - !nativeObject.hasOwnProperty(staticKey) && - !isIgnored(staticObject[staticKey]) - ) { + if (!nativeObject.hasOwnProperty(staticKey)) { differences.push({ path: [...path, staticKey], type: 'unexpected', diff --git a/Libraries/NativeComponent/ViewConfigIgnore.js b/Libraries/NativeComponent/ViewConfigIgnore.js deleted file mode 100644 index 8df7c83a06..0000000000 --- a/Libraries/NativeComponent/ViewConfigIgnore.js +++ /dev/null @@ -1,27 +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. - * - * @flow strict - * @format - */ - -const ignoredViewConfigProps = new WeakSet<{...}>(); - -/** - * Decorates ViewConfig values that are dynamically injected by the library, - * react-native-gesture-handler. (T45765076) - */ -export function DynamicallyInjectedByGestureHandler(object: T): T { - ignoredViewConfigProps.add(object); - return object; -} - -export function isIgnored(value: mixed): boolean { - if (typeof value === 'object' && value != null) { - return ignoredViewConfigProps.has(value); - } - return false; -}