Back out "Introduce a PlatformBaseViewConfig for all HostComponents"

Summary: Changelog: [Internal]

Reviewed By: arushikesarwani94

Differential Revision: D33042499

fbshipit-source-id: 603fbfa4e2f482c5d002532745a29170daded184

Libraries/Components/View/ViewNativeComponent.js

@@ -12,73 +12,12 @@ import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentR
 import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import {type ViewProps as Props} from './ViewPropTypes';
-import Platform from '../../Utilities/Platform';
-
 import * as React from 'react';
 
-const ViewPartialViewConfig =
-  Platform.OS === 'android'
-    ? {
-        uiViewClassName: 'RCTView',
-        validAttributes: {
-          // ReactClippingViewManager @ReactProps
-          removeClippedSubviews: true,
-
-          // ReactViewManager @ReactProps
-          accessible: true,
-          hasTVPreferredFocus: true,
-          nextFocusDown: true,
-          nextFocusForward: true,
-          nextFocusLeft: true,
-          nextFocusRight: true,
-          nextFocusUp: true,
-
-          borderRadius: true,
-          borderTopLeftRadius: true,
-          borderTopRightRadius: true,
-          borderBottomRightRadius: true,
-          borderBottomLeftRadius: true,
-          borderTopStartRadius: true,
-          borderTopEndRadius: true,
-          borderBottomStartRadius: true,
-          borderBottomEndRadius: true,
-
-          borderStyle: true,
-          hitSlop: true,
-          pointerEvents: true,
-          nativeBackgroundAndroid: true,
-          nativeForegroundAndroid: true,
-          needsOffscreenAlphaCompositing: true,
-
-          borderWidth: true,
-          borderLeftWidth: true,
-          borderRightWidth: true,
-          borderTopWidth: true,
-          borderBottomWidth: true,
-          borderStartWidth: true,
-          borderEndWidth: true,
-
-          borderColor: {process: require('../../StyleSheet/processColor')},
-          borderLeftColor: {process: require('../../StyleSheet/processColor')},
-          borderRightColor: {process: require('../../StyleSheet/processColor')},
-          borderTopColor: {process: require('../../StyleSheet/processColor')},
-          borderBottomColor: {
-            process: require('../../StyleSheet/processColor'),
-          },
-          borderStartColor: {process: require('../../StyleSheet/processColor')},
-          borderEndColor: {process: require('../../StyleSheet/processColor')},
-
-          focusable: true,
-          overflow: true,
-          backfaceVisibility: true,
-        },
-      }
-    : {
-        uiViewClassName: 'RCTView',
-      };
-
 const ViewNativeComponent: HostComponent<Props> =
-  NativeComponentRegistry.get<Props>('RCTView', () => ViewPartialViewConfig);
+  NativeComponentRegistry.get<Props>('RCTView', () => ({
+    uiViewClassName: 'RCTView',
+  }));
 
 interface NativeCommands {
   +hotspotUpdate: (

Libraries/Core/setUpReactDevTools.js

@@ -58,13 +58,12 @@ if (__DEV__) {
         isWebSocketOpen = true;
       });
 
-      const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-
+      const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
       reactDevTools.connectToDevTools({
         isAppActive,
         resolveRNStyle: require('../StyleSheet/flattenStyle'),
         nativeStyleEditorValidAttributes: Object.keys(
-          ReactNativeStyleAttributes,
+          viewConfig.validAttributes.style,
         ),
         websocket: ws,
       });

Libraries/Inspector/Inspector.js

@@ -19,7 +19,6 @@ const React = require('react');
 const ReactNative = require('../Renderer/shims/ReactNative');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const View = require('../Components/View/View');
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 
 const invariant = require('invariant');
 
@@ -48,7 +47,10 @@ const renderers = findRenderers();
 // Required for React DevTools to view/edit React Native styles in Flipper.
 // Flipper doesn't inject these values when initializing DevTools.
 hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
-hook.nativeStyleEditorValidAttributes = Object.keys(ReactNativeStyleAttributes);
+const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
+hook.nativeStyleEditorValidAttributes = Object.keys(
+  viewConfig.validAttributes.style,
+);
 
 function findRenderers(): $ReadOnlyArray<ReactRenderer> {
   const allRenderers = Array.from(hook.renderers.values());

Libraries/NativeComponent/PlatformBaseViewConfig.js

@@ -1,376 +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 strict-local
- */
-
-import {Platform} from 'react-native';
-import type {PartialViewConfig} from '../Renderer/shims/ReactNativeTypes';
-import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
-import {DynamicallyInjectedByGestureHandler} from './ViewConfigIgnore';
-
-type PartialViewConfigWithoutName = $Rest<
-  PartialViewConfig,
-  {uiViewClassName: string},
->;
-
-const PlatformBaseViewConfig: PartialViewConfigWithoutName =
-  Platform.OS === 'android'
-    ? /**
-       * On Android, Props are derived from a ViewManager and its ShadowNode.
-       *
-       * Where did we find these base platform props from?
-       * - Nearly all component ViewManagers descend from BaseViewManager.
-       * - BaseViewManagers' ShadowNodes descend from LayoutShadowNode.
-       *
-       * So, these ViewConfigs are generated from LayoutShadowNode and BaseViewManager.
-       */
-      {
-        directEventTypes: {
-          topAccessibilityAction: {
-            registrationName: 'onAccessibilityAction',
-          },
-          topPointerEnter: {
-            registrationName: 'pointerenter',
-          },
-          topPointerLeave: {
-            registrationName: 'pointerleave',
-          },
-          topPointerMove: {
-            registrationName: 'pointermove',
-          },
-          onGestureHandlerEvent: DynamicallyInjectedByGestureHandler({
-            registrationName: 'onGestureHandlerEvent',
-          }),
-          onGestureHandlerStateChange: DynamicallyInjectedByGestureHandler({
-            registrationName: 'onGestureHandlerStateChange',
-          }),
-        },
-        validAttributes: {
-          // @ReactProps from BaseViewManager
-          backgroundColor: {process: require('../StyleSheet/processColor')},
-          transform: true,
-          opacity: true,
-          elevation: true,
-          shadowColor: {process: require('../StyleSheet/processColor')},
-          zIndex: true,
-          renderToHardwareTextureAndroid: true,
-          testID: true,
-          nativeID: true,
-          accessibilityLabel: true,
-          accessibilityHint: true,
-          accessibilityRole: true,
-          accessibilityState: true,
-          accessibilityActions: true,
-          accessibilityValue: true,
-          importantForAccessibility: true,
-          rotation: true,
-          scaleX: true,
-          scaleY: true,
-          translateX: true,
-          translateY: true,
-          accessibilityLiveRegion: true,
-
-          // @ReactProps from LayoutShadowNode
-          width: true,
-          minWidth: true,
-          collapsable: true,
-          maxWidth: true,
-          height: true,
-          minHeight: true,
-          maxHeight: true,
-          flex: true,
-          flexGrow: true,
-          flexShrink: true,
-          flexBasis: true,
-          aspectRatio: true,
-          flexDirection: true,
-          flexWrap: true,
-          alignSelf: true,
-          alignItems: true,
-          alignContent: true,
-          justifyContent: true,
-          overflow: true,
-          display: true,
-
-          margin: true,
-          marginVertical: true,
-          marginHorizontal: true,
-          marginStart: true,
-          marginEnd: true,
-          marginTop: true,
-          marginBottom: true,
-          marginLeft: true,
-          marginRight: true,
-
-          padding: true,
-          paddingVertical: true,
-          paddingHorizontal: true,
-          paddingStart: true,
-          paddingEnd: true,
-          paddingTop: true,
-          paddingBottom: true,
-          paddingLeft: true,
-          paddingRight: true,
-
-          borderWidth: true,
-          borderStartWidth: true,
-          borderEndWidth: true,
-          borderTopWidth: true,
-          borderBottomWidth: true,
-          borderLeftWidth: true,
-          borderRightWidth: true,
-
-          start: true,
-          end: true,
-          left: true,
-          right: true,
-          top: true,
-          bottom: true,
-
-          position: true,
-          onLayout: true,
-
-          pointerenter: true,
-          pointerleave: true,
-          pointermove: true,
-
-          style: ReactNativeStyleAttributes,
-        },
-      }
-    : /**
-       * On iOS, ViewManagers define all of a component's props.
-       * All ViewManagers extend RCTViewManager, and RCTViewManager declares
-       * these props.
-       */
-      {
-        bubblingEventTypes: {
-          // Generic Events
-          topPress: {
-            phasedRegistrationNames: {
-              bubbled: 'onPress',
-              captured: 'onPressCapture',
-            },
-          },
-          topChange: {
-            phasedRegistrationNames: {
-              bubbled: 'onChange',
-              captured: 'onChangeCapture',
-            },
-          },
-          topFocus: {
-            phasedRegistrationNames: {
-              bubbled: 'onFocus',
-              captured: 'onFocusCapture',
-            },
-          },
-          topBlur: {
-            phasedRegistrationNames: {
-              bubbled: 'onBlur',
-              captured: 'onBlurCapture',
-            },
-          },
-          topSubmitEditing: {
-            phasedRegistrationNames: {
-              bubbled: 'onSubmitEditing',
-              captured: 'onSubmitEditingCapture',
-            },
-          },
-          topEndEditing: {
-            phasedRegistrationNames: {
-              bubbled: 'onEndEditing',
-              captured: 'onEndEditingCapture',
-            },
-          },
-          topKeyPress: {
-            phasedRegistrationNames: {
-              bubbled: 'onKeyPress',
-              captured: 'onKeyPressCapture',
-            },
-          },
-
-          // Touch Events
-          topTouchStart: {
-            phasedRegistrationNames: {
-              bubbled: 'onTouchStart',
-              captured: 'onTouchStartCapture',
-            },
-          },
-          topTouchMove: {
-            phasedRegistrationNames: {
-              bubbled: 'onTouchMove',
-              captured: 'onTouchMoveCapture',
-            },
-          },
-          topTouchCancel: {
-            phasedRegistrationNames: {
-              bubbled: 'onTouchCancel',
-              captured: 'onTouchCancelCapture',
-            },
-          },
-          topTouchEnd: {
-            phasedRegistrationNames: {
-              bubbled: 'onTouchEnd',
-              captured: 'onTouchEndCapture',
-            },
-          },
-        },
-        directEventTypes: {
-          topAccessibilityAction: {
-            registrationName: 'onAccessibilityAction',
-          },
-          topAccessibilityTap: {
-            registrationName: 'onAccessibilityTap',
-          },
-          topMagicTap: {
-            registrationName: 'onMagicTap',
-          },
-          topAccessibilityEscape: {
-            registrationName: 'onAccessibilityEscape',
-          },
-          topLayout: {
-            registrationName: 'onLayout',
-          },
-          onGestureHandlerEvent: DynamicallyInjectedByGestureHandler({
-            registrationName: 'onGestureHandlerEvent',
-          }),
-          onGestureHandlerStateChange: DynamicallyInjectedByGestureHandler({
-            registrationName: 'onGestureHandlerStateChange',
-          }),
-        },
-        validAttributes: {
-          // View Props
-          accessible: true,
-          accessibilityActions: true,
-          accessibilityLabel: true,
-          accessibilityHint: true,
-          accessibilityValue: true,
-          accessibilityViewIsModal: true,
-          accessibilityElementsHidden: true,
-          accessibilityIgnoresInvertColors: true,
-          onAccessibilityAction: true,
-          onAccessibilityTap: true,
-          onMagicTap: true,
-          onAccessibilityEscape: true,
-          testID: true,
-          backgroundColor: {process: require('../StyleSheet/processColor')},
-          backfaceVisibility: true,
-          opacity: true,
-          shadowColor: {process: require('../StyleSheet/processColor')},
-          shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
-          shadowOpacity: true,
-          shadowRadius: true,
-          needsOffscreenAlphaCompositing: true,
-          overflow: true,
-          shouldRasterizeIOS: true,
-          transform: {diff: require('../Utilities/differ/matricesDiffer')},
-          accessibilityRole: true,
-          accessibilityState: true,
-          nativeID: true,
-          pointerEvents: true,
-          removeClippedSubviews: true,
-          borderRadius: true,
-          borderColor: {process: require('../StyleSheet/processColor')},
-          borderWidth: true,
-          borderStyle: true,
-          hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
-          collapsable: true,
-
-          borderTopWidth: true,
-          borderTopColor: {process: require('../StyleSheet/processColor')},
-          borderRightWidth: true,
-          borderRightColor: {process: require('../StyleSheet/processColor')},
-          borderBottomWidth: true,
-          borderBottomColor: {process: require('../StyleSheet/processColor')},
-          borderLeftWidth: true,
-          borderLeftColor: {process: require('../StyleSheet/processColor')},
-          borderStartWidth: true,
-          borderStartColor: {process: require('../StyleSheet/processColor')},
-          borderEndWidth: true,
-          borderEndColor: {process: require('../StyleSheet/processColor')},
-
-          borderTopLeftRadius: true,
-          borderTopRightRadius: true,
-          borderTopStartRadius: true,
-          borderTopEndRadius: true,
-          borderBottomLeftRadius: true,
-          borderBottomRightRadius: true,
-          borderBottomStartRadius: true,
-          borderBottomEndRadius: true,
-          display: true,
-          zIndex: true,
-
-          // ShadowView properties
-          top: true,
-          right: true,
-          start: true,
-          end: true,
-          bottom: true,
-          left: true,
-
-          width: true,
-          height: true,
-
-          minWidth: true,
-          maxWidth: true,
-          minHeight: true,
-          maxHeight: true,
-
-          // Also declared as ViewProps
-          // borderTopWidth: true,
-          // borderRightWidth: true,
-          // borderBottomWidth: true,
-          // borderLeftWidth: true,
-          // borderStartWidth: true,
-          // borderEndWidth: true,
-          // borderWidth: true,
-
-          marginTop: true,
-          marginRight: true,
-          marginBottom: true,
-          marginLeft: true,
-          marginStart: true,
-          marginEnd: true,
-          marginVertical: true,
-          marginHorizontal: true,
-          margin: true,
-
-          paddingTop: true,
-          paddingRight: true,
-          paddingBottom: true,
-          paddingLeft: true,
-          paddingStart: true,
-          paddingEnd: true,
-          paddingVertical: true,
-          paddingHorizontal: true,
-          padding: true,
-
-          flex: true,
-          flexGrow: true,
-          flexShrink: true,
-          flexBasis: true,
-          flexDirection: true,
-          flexWrap: true,
-          justifyContent: true,
-          alignItems: true,
-          alignSelf: true,
-          alignContent: true,
-          position: true,
-          aspectRatio: true,
-
-          // Also declared as ViewProps
-          // overflow: true,
-          // display: true,
-
-          onLayout: true,
-          direction: true,
-
-          style: ReactNativeStyleAttributes,
-        },
-      };
-
-export default PlatformBaseViewConfig;

Libraries/NativeComponent/ViewConfig.js

@@ -8,11 +8,11 @@
  * @format
  */
 
+import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
 import type {
   PartialViewConfig,
   ViewConfig,
 } from '../Renderer/shims/ReactNativeTypes';
-import PlatformBaseViewConfig from './PlatformBaseViewConfig';
 
 /**
  * Creates a complete `ViewConfig` from a `PartialViewConfig`.
@@ -24,16 +24,16 @@ export function createViewConfig(
     uiViewClassName: partialViewConfig.uiViewClassName,
     Commands: {},
     bubblingEventTypes: composeIndexers(
-      PlatformBaseViewConfig.bubblingEventTypes,
+      ReactNativeViewViewConfig.bubblingEventTypes,
       partialViewConfig.bubblingEventTypes,
     ),
     directEventTypes: composeIndexers(
-      PlatformBaseViewConfig.directEventTypes,
+      ReactNativeViewViewConfig.directEventTypes,
       partialViewConfig.directEventTypes,
     ),
     validAttributes: composeIndexers(
       // $FlowFixMe[incompatible-call] `style` property confuses Flow.
-      PlatformBaseViewConfig.validAttributes,
+      ReactNativeViewViewConfig.validAttributes,
       // $FlowFixMe[incompatible-call] `style` property confuses Flow.
       partialViewConfig.validAttributes,
     ),

Libraries/Utilities/verifyComponentAttributeEquivalence.js

@@ -8,7 +8,7 @@
  * @flow
  */
 
-import PlatformBaseViewConfig from '../NativeComponent/PlatformBaseViewConfig';
+import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
 import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
 
 const IGNORED_KEYS = ['transform', 'hitSlop'];
@@ -107,7 +107,7 @@ export function getConfigWithoutViewProps(
   }
 
   return Object.keys(viewConfig[propName])
-    .filter(prop => !PlatformBaseViewConfig[propName][prop])
+    .filter(prop => !ReactNativeViewViewConfig[propName][prop])
     .reduce((obj, prop) => {
       obj[prop] = viewConfig[propName][prop];
       return obj;