Back out "feat: mapped layout props for view component"

Summary:
Changelog: [Internal]

Original commit changeset: 870b9b58a740

Original Phabricator Diff: D41108750 (cf37479)

Reviewed By: necolas, makovkastar

Differential Revision: D41145105

fbshipit-source-id: 8e525284d4d6d152fbcf053ec353d40dda3ee8d2

Libraries/Components/TextInput/TextInput.js

@@ -19,7 +19,6 @@ import type {TextInputType} from './TextInput.flow';
 
 import usePressability from '../../Pressability/usePressability';
 import flattenStyle from '../../StyleSheet/flattenStyle';
-import processLayoutProps from '../../StyleSheet/processStyles';
 import StyleSheet, {
   type ColorValue,
   type TextStyleProp,
@@ -1407,14 +1406,11 @@ function InternalTextInput(props: Props): React.Node {
         ? RCTMultilineTextInputView
         : RCTSinglelineTextInputView;
 
-    let style =
+    const style =
       props.multiline === true
-        ? [styles.multilineInput, props.style]
+        ? StyleSheet.flatten([styles.multilineInput, props.style])
         : props.style;
 
-    style = flattenStyle(style);
-    style = processLayoutProps(style);
-
     const useOnChangeSync =
       (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
       !(props.onChange || props.onChangeText);
@@ -1446,9 +1442,7 @@ function InternalTextInput(props: Props): React.Node {
       />
     );
   } else if (Platform.OS === 'android') {
-    let style = flattenStyle(props.style);
-    style = processLayoutProps(style);
-
+    const style = [props.style];
     const autoCapitalize = props.autoCapitalize || 'sentences';
     const _accessibilityLabelledBy =
       props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;

Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap

@@ -32,7 +32,6 @@ exports[`TextInput tests should render as expected: should deep render when mock
   onStartShouldSetResponder={[Function]}
   rejectResponderTermination={true}
   selection={null}
-  style={Object {}}
   submitBehavior="blurAndSubmit"
   text=""
   underlineColorAndroid="transparent"
@@ -71,7 +70,6 @@ exports[`TextInput tests should render as expected: should deep render when not
   onStartShouldSetResponder={[Function]}
   rejectResponderTermination={true}
   selection={null}
-  style={Object {}}
   submitBehavior="blurAndSubmit"
   text=""
   underlineColorAndroid="transparent"

Libraries/Components/View/View.js

@@ -11,7 +11,6 @@
 import type {ViewProps} from './ViewPropTypes';
 
 import flattenStyle from '../../StyleSheet/flattenStyle';
-import processLayoutProps from '../../StyleSheet/processStyles';
 import TextAncestor from '../../Text/TextAncestor';
 import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
 import ViewNativeComponent from './ViewNativeComponent';
@@ -58,6 +57,7 @@ const View: React.AbstractComponent<
       nativeID,
       pointerEvents,
       role,
+      style,
       tabIndex,
       ...otherProps
     }: ViewProps,
@@ -81,10 +81,8 @@ const View: React.AbstractComponent<
       text: ariaValueText ?? accessibilityValue?.text,
     };
 
-    let style = flattenStyle(otherProps.style);
-    style = processLayoutProps(style);
-
-    const newPointerEvents = style?.pointerEvents || pointerEvents;
+    const flattenedStyle = flattenStyle(style);
+    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
 
     return (
       <TextAncestor.Provider value={false}>

Libraries/Image/Image.android.js

@@ -13,7 +13,6 @@ import type {ImageAndroid} from './Image.flow';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
-import processLayoutProps from '../StyleSheet/processStyles';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import TextAncestor from '../Text/TextAncestor';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
@@ -166,9 +165,6 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   }
 
   const {height, width, ...restProps} = props;
-
-  style = processLayoutProps(style);
-
   const {onLoadStart, onLoad, onLoadEnd, onError} = props;
   const nativeProps = {
     ...restProps,

Libraries/Image/Image.ios.js

@@ -14,7 +14,6 @@ import type {ImageIOS} from './Image.flow';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
-import processLayoutProps from '../StyleSheet/processStyles';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
 import ImageInjection from './ImageInjection';
@@ -138,8 +137,6 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   // $FlowFixMe[prop-missing]
   const tintColor = props.tintColor || style.tintColor;
 
-  style = processLayoutProps(style);
-
   if (props.children != null) {
     throw new Error(
       'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',

Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -69,15 +69,9 @@ export interface FlexStyle {
     | undefined;
   left?: number | string | undefined;
   margin?: number | string | undefined;
-  marginBlock?: number | string | undefined;
-  marginBlockEnd?: number | string | undefined;
-  marginBlockStart?: number | string | undefined;
   marginBottom?: number | string | undefined;
   marginEnd?: number | string | undefined;
   marginHorizontal?: number | string | undefined;
-  marginInline?: number | string | undefined;
-  marginInlineEnd?: number | string | undefined;
-  marginInlineStart?: number | string | undefined;
   marginLeft?: number | string | undefined;
   marginRight?: number | string | undefined;
   marginStart?: number | string | undefined;
@@ -90,14 +84,8 @@ export interface FlexStyle {
   overflow?: 'visible' | 'hidden' | 'scroll' | undefined;
   padding?: number | string | undefined;
   paddingBottom?: number | string | undefined;
-  paddingBlock?: number | string | undefined;
-  paddingBlockEnd?: number | string | undefined;
-  paddingBlockStart?: number | string | undefined;
   paddingEnd?: number | string | undefined;
   paddingHorizontal?: number | string | undefined;
-  paddingInline?: number | string | undefined;
-  paddingInlineEnd?: number | string | undefined;
-  paddingInlineStart?: number | string | undefined;
   paddingLeft?: number | string | undefined;
   paddingRight?: number | string | undefined;
   paddingStart?: number | string | undefined;

Libraries/StyleSheet/StyleSheetTypes.js

@@ -179,23 +179,6 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   margin?: DimensionValue,
 
-  /** Setting `marginBlock` has the same effect as setting both
-   *  `marginTop` and `marginBottom`.
-   */
-  marginBlock?: DimensionValue,
-
-  /** `marginBlockEnd` works like `margin-bottom` in CSS.
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
-   *  for more details.
-   */
-  marginBlockEnd?: DimensionValue,
-
-  /** `marginBlockStart` works like `margin-top` in CSS.
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
-   *  for more details.
-   */
-  marginBlockStart?: DimensionValue,
-
   /** `marginBottom` works like `margin-bottom` in CSS.
    *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
    *  for more details.
@@ -213,23 +196,6 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   marginHorizontal?: DimensionValue,
 
-  /** Setting `marginInline` has the same effect as setting
-   *  both `marginLeft` and `marginRight`.
-   */
-  marginInline?: DimensionValue,
-
-  /**
-   * When direction is `ltr`, `marginInlineEnd` is equivalent to `marginRight`.
-   * When direction is `rtl`, `marginInlineEnd` is equivalent to `marginLeft`.
-   */
-  marginInlineEnd?: DimensionValue,
-
-  /**
-   * When direction is `ltr`, `marginInlineStart` is equivalent to `marginLeft`.
-   * When direction is `rtl`, `marginInlineStart` is equivalent to `marginRight`.
-   */
-  marginInlineStart?: DimensionValue,
-
   /** `marginLeft` works like `margin-left` in CSS.
    *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
    *  for more details.
@@ -266,23 +232,6 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   padding?: DimensionValue,
 
-  /** Setting `paddingBlock` is like setting both of
-   *  `paddingTop` and `paddingBottom`.
-   */
-  paddingBlock?: DimensionValue,
-
-  /** `paddingBlockEnd` works like `padding-bottom` in CSS.
-   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-   * for more details.
-   */
-  paddingBlockEnd?: DimensionValue,
-
-  /** `paddingBlockStart` works like `padding-top` in CSS.
-   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-   * for more details.
-   */
-  paddingBlockStart?: DimensionValue,
-
   /** `paddingBottom` works like `padding-bottom` in CSS.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
    * for more details.
@@ -300,23 +249,6 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   paddingHorizontal?: DimensionValue,
 
-  /** Setting `paddingInline` is like setting both of
-   *  `paddingLeft` and `paddingRight`.
-   */
-  paddingInline?: DimensionValue,
-
-  /**
-   * When direction is `ltr`, `paddingInlineEnd` is equivalent to `paddingRight`.
-   * When direction is `rtl`, `paddingInlineEnd` is equivalent to `paddingLeft`.
-   */
-  paddingInlineEnd?: DimensionValue,
-
-  /**
-   * When direction is `ltr`, `paddingInlineStart` is equivalent to `paddingLeft`.
-   * When direction is `rtl`, `paddingInlineStart` is equivalent to `paddingRight`.
-   */
-  paddingInlineStart?: DimensionValue,
-
   /** `paddingLeft` works like `padding-left` in CSS.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
    * for more details.