diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index 13d8db56a5fe67..f44cc26a1c88dd 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -46,13 +46,6 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { flexWrap: true, gap: true, height: true, - inset: true, - insetBlock: true, - insetBlockEnd: true, - insetBlockStart: true, - insetInline: true, - insetInlineEnd: true, - insetInlineStart: true, justifyContent: true, left: true, margin: true, diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js index 5cd505439ea78b..a742b0dda6c923 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js @@ -258,14 +258,6 @@ const validAttributesForNonEventProps = { top: true, bottom: true, - inset: true, - insetBlock: true, - insetBlockEnd: true, - insetBlockStart: true, - insetInline: true, - insetInlineEnd: true, - insetInlineStart: true, - position: true, style: ReactNativeStyleAttributes, diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js index d8af157c4920ec..fd334f41b7ebed 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js @@ -236,14 +236,6 @@ const validAttributesForNonEventProps = { bottom: true, left: true, - inset: true, - insetBlock: true, - insetBlockEnd: true, - insetBlockStart: true, - insetInline: true, - insetInlineEnd: true, - insetInlineStart: true, - width: true, height: true, diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts index 300877f65e8271..856ee98b260c94 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -69,13 +69,6 @@ export interface FlexStyle { flexShrink?: number | undefined; flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined; height?: DimensionValue | undefined; - inset?: DimensionValue | undefined; - insetBlock?: DimensionValue | undefined; - insetBlockEnd?: DimensionValue | undefined; - insetBlockStart?: DimensionValue | undefined; - insetInline?: DimensionValue | undefined; - insetInlineEnd?: DimensionValue | undefined; - insetInlineStart?: DimensionValue | undefined; justifyContent?: | 'flex-start' | 'flex-end' diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 5d9b56c3f4ea6c..03ad89fec946b7 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -134,80 +134,6 @@ type ____LayoutStyle_Internal = $ReadOnly<{ */ top?: DimensionValue, - /** `inset` is a shorthand that corresponds to the top, right, bottom, and/or left properties. - * - * It works similarly to `inset` in CSS, but in React Native you - * must use points or percentages. Ems and other units are not supported. - * - * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset - * for more details of how `inset` affects layout. - */ - inset?: DimensionValue, - - /** `insetBlock` is a shorthand that corresponds to the `insetBlockStart` and `insetBlockEnd` properties. - * - * It works similarly to `inset-block` in CSS, but in React Native you - * must use points or percentages. Ems and other units are not supported. - * - * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block - * for more details of how `inset-block` affects layout. - */ - insetBlock?: DimensionValue, - - /** `insetBlockEnd` is a logical property that sets the length that an - * element is offset in the block direction from its ending edge. - * - * It works similarly to `inset-block-end` in CSS, but in React Native you - * must use points or percentages. Ems and other units are not supported. - * - * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end - * for more details of how `inset-block-end` affects layout. - */ - insetBlockEnd?: DimensionValue, - - /** `insetBlockStart` is a logical property that sets the length that an - * element is offset in the block direction from its starting edge. - * - * It works similarly to `inset-block-start` in CSS, but in React Native you - * must use points or percentages. Ems and other units are not supported. - * - * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start - * for more details of how `inset-block-start` affects layout. - */ - insetBlockStart?: DimensionValue, - - /** `insetInline` is a shorthand that corresponds to the `insetInlineStart` and `insetInlineEnd` properties. - * - * It works similarly to `inset-inline` in CSS, but in React Native you - * must use points or percentages. Ems and other units are not supported. - * - * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline - * for more details of how `inset-inline` affects layout. - */ - insetInline?: DimensionValue, - - /** `insetInlineEnd` is a logical property that sets the length that an - * element is offset in the starting inline direction. - * - * It works similarly to `inset-inline-end` in CSS, but in React Native you - * must use points or percentages. Ems and other units are not supported. - * - * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end - * for more details of how `inset-inline-end` affects layout. - */ - insetInlineEnd?: DimensionValue, - - /** `insetInlineStart` is a logical property that sets the length that an - * element is offset in the starting inline direction. - * - * It works similarly to `inset-inline-start` in CSS, but in React Native you - * must use points or percentages. Ems and other units are not supported. - * - * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start - * for more details of how `inset-inline-start` affects layout. - */ - insetInlineStart?: DimensionValue, - /** `minWidth` is the minimum width for this component, in logical pixels. * * It works similarly to `min-width` in CSS, but in React Native you diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp index 8e20136627a6a1..b46d36f5e85ca7 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp @@ -369,21 +369,6 @@ void YogaLayoutableShadowNode::updateYogaProps() { YGStyle result{baseStyle}; // Aliases with precedence - if (!props.inset.isUndefined()) { - result.position()[YGEdgeAll] = props.inset; - } - if (!props.insetBlock.isUndefined()) { - result.position()[YGEdgeVertical] = props.insetBlock; - } - if (!props.insetInline.isUndefined()) { - result.position()[YGEdgeHorizontal] = props.insetInline; - } - if (!props.insetInlineEnd.isUndefined()) { - result.position()[YGEdgeEnd] = props.insetInlineEnd; - } - if (!props.insetInlineStart.isUndefined()) { - result.position()[YGEdgeStart] = props.insetInlineStart; - } if (!props.marginInline.isUndefined()) { result.margin()[YGEdgeHorizontal] = props.marginInline; } @@ -410,12 +395,6 @@ void YogaLayoutableShadowNode::updateYogaProps() { } // Aliases without precedence - if (CompactValue(result.position()[YGEdgeBottom]).isUndefined()) { - result.position()[YGEdgeBottom] = props.insetBlockEnd; - } - if (CompactValue(result.position()[YGEdgeTop]).isUndefined()) { - result.position()[YGEdgeTop] = props.insetBlockStart; - } if (CompactValue(result.margin()[YGEdgeTop]).isUndefined()) { result.margin()[YGEdgeTop] = props.marginBlockStart; } diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp index 724a33ab4a3b80..2a18709a908173 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp @@ -136,13 +136,6 @@ void YogaStylableProps::setProp( static const auto defaults = YogaStylableProps{}; // Aliases - RAW_SET_PROP_SWITCH_CASE(inset, "inset"); - RAW_SET_PROP_SWITCH_CASE(insetBlock, "insetBlock"); - RAW_SET_PROP_SWITCH_CASE(insetBlockEnd, "insetBlockEnd"); - RAW_SET_PROP_SWITCH_CASE(insetBlockStart, "insetBlockStart"); - RAW_SET_PROP_SWITCH_CASE(insetInline, "insetInline"); - RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd"); - RAW_SET_PROP_SWITCH_CASE(insetInlineStart, "insetInlineStart"); RAW_SET_PROP_SWITCH_CASE(marginInline, "marginInline"); RAW_SET_PROP_SWITCH_CASE(marginInlineStart, "marginInlineStart"); RAW_SET_PROP_SWITCH_CASE(marginInlineEnd, "marginInlineEnd"); @@ -242,48 +235,6 @@ void YogaStylableProps::convertRawPropAliases( const PropsParserContext &context, YogaStylableProps const &sourceProps, RawProps const &rawProps) { - inset = convertRawProp( - context, - rawProps, - "inset", - sourceProps.inset, - CompactValue::ofUndefined()); - insetBlock = convertRawProp( - context, - rawProps, - "insetBlock", - sourceProps.insetBlock, - CompactValue::ofUndefined()); - insetBlockEnd = convertRawProp( - context, - rawProps, - "insetBlockEnd", - sourceProps.insetBlockEnd, - CompactValue::ofUndefined()); - insetBlockStart = convertRawProp( - context, - rawProps, - "insetBlockStart", - sourceProps.insetBlockStart, - CompactValue::ofUndefined()); - insetInline = convertRawProp( - context, - rawProps, - "insetInline", - sourceProps.insetInline, - CompactValue::ofUndefined()); - insetInlineEnd = convertRawProp( - context, - rawProps, - "insetInlineEnd", - sourceProps.insetInlineEnd, - CompactValue::ofUndefined()); - insetInlineStart = convertRawProp( - context, - rawProps, - "insetInlineStart", - sourceProps.insetInlineStart, - CompactValue::ofUndefined()); marginInline = convertRawProp( context, rawProps, diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h index 6371bb3dc70d11..a58f9c57ef69cd 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h @@ -43,11 +43,6 @@ class YogaStylableProps : public Props { // Duplicates of existing properties with different names, taking // precedence. E.g. "marginBlock" instead of "marginVertical" - CompactValue inset; - CompactValue insetInline; - CompactValue insetInlineEnd; - CompactValue insetInlineStart; - CompactValue marginInline; CompactValue marginInlineStart; CompactValue marginInlineEnd; @@ -61,10 +56,6 @@ class YogaStylableProps : public Props { // BlockEnd/BlockStart map to top/bottom (no writing mode), but we preserve // Yoga's precedence and prefer specific edges (e.g. top) to ones which are // flow relative (e.g. blockStart). - CompactValue insetBlock; - CompactValue insetBlockEnd; - CompactValue insetBlockStart; - CompactValue marginBlockStart; CompactValue marginBlockEnd; diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js index 58a20c7b20980a..db6dfb23e8975d 100644 --- a/packages/rn-tester/js/examples/View/ViewExample.js +++ b/packages/rn-tester/js/examples/View/ViewExample.js @@ -688,129 +688,4 @@ exports.examples = [ return ; }, }, - { - title: 'Insets', - render(): React.Node { - return ( - - - - inset 10 - - - - - insetBlock 5 - - - - - insetBlockEnd 5 - - - - - insetBlockStart 5 - - - - - insetInline 5 - - - - - insetInlineEnd 5 - - - - - insetInlineStart 5 - - - - ); - }, - }, - { - title: 'Logical Border Color', - render(): React.Node { - return ( - - - - borderBlockColor orange - - - - - borderBlockStartColor purple - borderBlockEndColor green - - - - ); - }, - }, ];