feat: mapped layout props for view component

Libraries/Components/View/View.js

@@ -14,6 +14,7 @@ import ViewNativeComponent from './ViewNativeComponent';
 import TextAncestor from '../../Text/TextAncestor';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import * as React from 'react';
+import processLayoutProps from '../../StyleSheet/processStyles';
 
 export type Props = ViewProps;
 
@@ -139,8 +140,13 @@ const View: React.AbstractComponent<
     };
     const restWithDefaultProps = {...otherProps, accessibilityValue};
 
-    const flattenedStyle = flattenStyle(style);
-    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
+    let flattendStyle = flattenStyle(style);
+
+    if (flattendStyle) {
+      flattendStyle = processLayoutProps(flattendStyle);
+    }
+
+    const newPointerEvents = flattendStyle?.pointerEvents || pointerEvents;
 
     return (
       <TextAncestor.Provider value={false}>
@@ -161,8 +167,8 @@ const View: React.AbstractComponent<
               ? 'no-hide-descendants'
               : importantForAccessibility
           }
+          style={flattendStyle}
           {...restWithDefaultProps}
-          style={style}
           pointerEvents={newPointerEvents}
           ref={forwardedRef}
         />

Libraries/Image/Image.android.js

@@ -26,6 +26,7 @@ import {convertObjectFitToResizeMode} from './ImageUtils';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 import type {RootTag} from '../Types/RootTagTypes';
 import {getImageSourcesFromImageProps} from './ImageSourceUtils';
+import processLayoutProps from '../StyleSheet/processStyles';
 
 let _requestId = 1;
 function generateRequestId() {
@@ -166,6 +167,9 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   }
 
   const {height, width, ...restProps} = props;
+
+  style = flattenStyle(style);
+
   const {onLoadStart, onLoad, onLoadEnd, onError} = props;
   const nativeProps = {
     ...restProps,

Libraries/Image/Image.ios.js

@@ -26,6 +26,7 @@ import {convertObjectFitToResizeMode} from './ImageUtils';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
 import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
 import {getImageSourcesFromImageProps} from './ImageSourceUtils';
+import processLayoutProps from '../StyleSheet/processStyles';
 
 function getSize(
   uri: string,
@@ -140,6 +141,8 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   // $FlowFixMe[prop-missing]
   const tintColor = props.tintColor || style.tintColor;
 
+  let flattendStyle = flattenStyle(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.',
@@ -173,7 +176,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
             accessibilityState={_accessibilityState}
             {...restProps}
             ref={forwardedRef}
-            style={style}
+            style={flattendStyle}
             resizeMode={resizeMode}
             tintColor={tintColor}
             source={sources}

Libraries/StyleSheet/StyleSheetTypes.js

@@ -183,6 +183,23 @@ 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.
@@ -200,6 +217,23 @@ 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.
@@ -236,6 +270,23 @@ 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.
@@ -253,6 +304,23 @@ 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.

Libraries/StyleSheet/processStyles.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ */
+'use strict';
+
+import type {____FlattenStyleProp_Internal} from './StyleSheetTypes';
+import type {ViewStyleProp} from './StyleSheet';
+
+export default function processLayoutProps(
+  flattendStyle: ____FlattenStyleProp_Internal<ViewStyleProp>,
+): ____FlattenStyleProp_Internal<ViewStyleProp> {
+  const flattend_Style = {...flattendStyle};
+  const layoutPropMap = {
+    marginInlineStart: 'marginStart',
+    marginInlineEnd: 'marginEnd',
+    marginBlockStart: 'marginTop',
+    marginBlockEnd: 'marginBottom',
+    marginBlock: 'marginVertical',
+    marginInline: 'marginHorizontal',
+    paddingInlineStart: 'paddingStart',
+    paddingInlineEnd: 'paddingEnd',
+    paddingBlockStart: 'paddingTop',
+    paddingBlockEnd: 'paddingBottom',
+    paddingBlock: 'paddingVertical',
+    paddingInline: 'paddingHorizontal',
+  };
+  if (flattend_Style) {
+    Object.keys(layoutPropMap).forEach(key => {
+      if (flattend_Style && flattend_Style[key] !== undefined) {
+        flattend_Style[layoutPropMap[key]] = flattend_Style[key];
+        delete flattend_Style[key];
+      }
+    });
+  }
+
+  return flattend_Style;
+}

Libraries/Text/Text.js

@@ -174,6 +174,13 @@ const Text: React.AbstractComponent<
     _selectable = userSelectToSelectableMap[style.userSelect];
   }
 
+  Object.keys(layoutPropMap).forEach(key => {
+    if (style && style[key] !== undefined) {
+      style[layoutPropMap[key]] = style[key];
+      delete style[key];
+    }
+  });
+
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
       style = StyleSheet.compose(restProps.style, {
@@ -231,6 +238,21 @@ const Text: React.AbstractComponent<
   );
 });
 
+const layoutPropMap = {
+  marginInlineStart: 'marginStart',
+  marginInlineEnd: 'marginEnd',
+  marginBlockStart: 'marginTop',
+  marginBlockEnd: 'marginBottom',
+  marginBlock: 'marginVertical',
+  marginInline: 'marginHorizontal',
+  paddingInlineStart: 'paddingStart',
+  paddingInlineEnd: 'paddingEnd',
+  paddingBlockStart: 'paddingTop',
+  paddingBlockEnd: 'paddingBottom',
+  paddingBlock: 'paddingVertical',
+  paddingInline: 'paddingHorizontal',
+};
+
 Text.displayName = 'Text';
 
 /**