From c3c15267191e445bd09dc37bfb9551f3d1e60d7f Mon Sep 17 00:00:00 2001 From: Mathieu Acthernoene Date: Fri, 13 Nov 2026 14:11:07 +0100 Subject: [PATCH 1/3] Add logical border width and inline border color props # Conflicts: # packages/react-native/ReactNativeApi.d.ts --- .../View/ReactNativeStyleAttributes.js | 9 + .../NativeComponent/BaseViewConfig.android.js | 9 + .../NativeComponent/BaseViewConfig.ios.js | 6 + .../Libraries/StyleSheet/StyleSheetTypes.js | 45 +++++ .../ReactAndroid/api/ReactAndroid.api | 15 ++ .../com/facebook/react/uimanager/Spacing.kt | 20 ++- .../com/facebook/react/uimanager/ViewProps.kt | 9 + .../react/uimanager/style/BorderColors.kt | 24 ++- .../react/uimanager/style/BorderInsets.kt | 48 ++++-- .../react/uimanager/style/LogicalEdge.kt | 17 +- .../react/views/view/ReactViewManager.kt | 18 +- .../components/view/BaseViewProps.cpp | 25 ++- .../components/view/ViewShadowNode.cpp | 7 +- .../view/YogaLayoutableShadowNode.cpp | 18 ++ .../components/view/YogaStylableProps.cpp | 44 +++++ .../components/view/YogaStylableProps.h | 8 + .../components/view/HostPlatformViewProps.cpp | 15 ++ .../renderer/components/view/primitives.h | 11 +- .../components/view/propsConversions.h | 7 + .../react/renderer/core/PropsMacros.h | 5 +- packages/react-native/ReactNativeApi.d.ts | 157 ++++++++++-------- .../__typetests__/stylesheet-style-props.tsx | 3 + .../Libraries/StyleSheet/StyleSheetTypes.d.ts | 9 + .../api-snapshots/ReactAndroidDebugCxx.api | 9 + .../ReactAndroidFrameworksCxx.api | 9 + .../api-snapshots/ReactAndroidNewarchCxx.api | 9 + .../api-snapshots/ReactAndroidReleaseCxx.api | 9 + .../api-snapshots/ReactAppleDebugCxx.api | 9 + .../api-snapshots/ReactAppleFrameworksCxx.api | 9 + .../api-snapshots/ReactAppleNewarchCxx.api | 9 + .../api-snapshots/ReactAppleReleaseCxx.api | 9 + .../api-snapshots/ReactCommonDebugCxx.api | 9 + .../ReactCommonFrameworksCxx.api | 9 + .../api-snapshots/ReactCommonNewarchCxx.api | 9 + .../api-snapshots/ReactCommonReleaseCxx.api | 9 + 35 files changed, 523 insertions(+), 114 deletions(-) diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index 7f6fabfb0b31..d7eba6b0c7c5 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -88,8 +88,14 @@ const ReactNativeStyleAttributes: {[key: string]: AnyAttributeType, ...} = { alignItems: true, alignSelf: true, aspectRatio: aspectRatioAttribute, + borderBlockEndWidth: true, + borderBlockStartWidth: true, + borderBlockWidth: true, borderBottomWidth: true, borderEndWidth: true, + borderInlineEndWidth: true, + borderInlineStartWidth: true, + borderInlineWidth: true, borderLeftWidth: true, borderRightWidth: true, borderStartWidth: true, @@ -241,6 +247,9 @@ const ReactNativeStyleAttributes: {[key: string]: AnyAttributeType, ...} = { borderEndColor: colorAttribute, borderEndEndRadius: true, borderEndStartRadius: true, + borderInlineColor: colorAttribute, + borderInlineEndColor: colorAttribute, + borderInlineStartColor: colorAttribute, borderLeftColor: colorAttribute, borderRadius: true, borderRightColor: colorAttribute, diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js index f25ee8cecb3a..289cbfec3f0f 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js @@ -333,6 +333,12 @@ const validAttributesForNonEventProps = { borderBottomWidth: true, borderLeftWidth: true, borderRightWidth: true, + borderBlockWidth: true, + borderBlockEndWidth: true, + borderBlockStartWidth: true, + borderInlineWidth: true, + borderInlineEndWidth: true, + borderInlineStartWidth: true, outlineColor: colorAttribute, outlineOffset: true, @@ -399,6 +405,9 @@ const validAttributesForNonEventProps = { borderBlockColor: colorAttribute, borderBlockEndColor: colorAttribute, borderBlockStartColor: colorAttribute, + borderInlineColor: colorAttribute, + borderInlineEndColor: colorAttribute, + borderInlineStartColor: colorAttribute, focusable: true, tabIndex: true, backfaceVisibility: true, diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js index 80c413a7c1d0..299e36b3970d 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js @@ -243,9 +243,11 @@ const validAttributesForNonEventProps = { borderRadius: true, borderColor: colorAttribute, borderBlockColor: colorAttribute, + borderInlineColor: colorAttribute, borderCurve: true, borderWidth: true, borderBlockWidth: true, + borderInlineWidth: true, borderStyle: true, hitSlop: {diff: require('../Utilities/differ/insetsDiffer').default}, collapsable: true, @@ -267,10 +269,14 @@ const validAttributesForNonEventProps = { borderBlockStartWidth: true, borderStartColor: colorAttribute, borderBlockStartColor: colorAttribute, + borderInlineStartWidth: true, + borderInlineStartColor: colorAttribute, borderEndWidth: true, borderBlockEndWidth: true, borderEndColor: colorAttribute, borderBlockEndColor: colorAttribute, + borderInlineEndWidth: true, + borderInlineEndColor: colorAttribute, borderTopLeftRadius: true, borderTopRightRadius: true, diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 0e926394122a..89cd242b6c9a 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -437,6 +437,24 @@ type ____LayoutStyle_Internal = Readonly<{ */ borderWidth?: number, + /** `borderBlockEndWidth` works like `border-block-end-width` in CSS. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width + * for more details. + */ + borderBlockEndWidth?: number, + + /** `borderBlockStartWidth` works like `border-block-start-width` in CSS. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width + * for more details. + */ + borderBlockStartWidth?: number, + + /** `borderBlockWidth` works like `border-block-width` in CSS. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-width + * for more details. + */ + borderBlockWidth?: number, + /** `borderBottomWidth` works like `border-bottom-width` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width * for more details. @@ -449,6 +467,24 @@ type ____LayoutStyle_Internal = Readonly<{ */ borderEndWidth?: number, + /** `borderInlineEndWidth` works like `border-inline-end-width` in CSS. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width + * for more details. + */ + borderInlineEndWidth?: number, + + /** `borderInlineStartWidth` works like `border-inline-start-width` in CSS. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width + * for more details. + */ + borderInlineStartWidth?: number, + + /** `borderInlineWidth` works like `border-inline-width` in CSS. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width + * for more details. + */ + borderInlineWidth?: number, + /** `borderLeftWidth` works like `border-left-width` in CSS. * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width * for more details. @@ -848,6 +884,9 @@ export type ____ViewStyle_InternalBase = Readonly<{ borderBlockColor?: ____ColorValue_Internal, borderBlockEndColor?: ____ColorValue_Internal, borderBlockStartColor?: ____ColorValue_Internal, + borderInlineColor?: ____ColorValue_Internal, + borderInlineEndColor?: ____ColorValue_Internal, + borderInlineStartColor?: ____ColorValue_Internal, borderRadius?: number | string, borderBottomEndRadius?: number | string, borderBottomLeftRadius?: number | string, @@ -869,6 +908,12 @@ export type ____ViewStyle_InternalBase = Readonly<{ borderRightWidth?: number, borderStartWidth?: number, borderTopWidth?: number, + borderBlockWidth?: number, + borderBlockEndWidth?: number, + borderBlockStartWidth?: number, + borderInlineWidth?: number, + borderInlineEndWidth?: number, + borderInlineStartWidth?: number, opacity?: number, outlineColor?: ____ColorValue_Internal, outlineOffset?: number, diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api index 9f62f0c9b496..1b09dfd050f5 100644 --- a/packages/react-native/ReactAndroid/api/ReactAndroid.api +++ b/packages/react-native/ReactAndroid/api/ReactAndroid.api @@ -4127,6 +4127,9 @@ public final class com/facebook/react/uimanager/Spacing { public static final field Companion Lcom/facebook/react/uimanager/Spacing$Companion; public static final field END I public static final field HORIZONTAL I + public static final field INLINE I + public static final field INLINE_END I + public static final field INLINE_START I public static final field LEFT I public static final field RIGHT I public static final field START I @@ -4476,7 +4479,10 @@ public final class com/facebook/react/uimanager/ViewProps { public static final field BACKGROUND_SIZE Ljava/lang/String; public static final field BORDER_BLOCK_COLOR Ljava/lang/String; public static final field BORDER_BLOCK_END_COLOR Ljava/lang/String; + public static final field BORDER_BLOCK_END_WIDTH Ljava/lang/String; public static final field BORDER_BLOCK_START_COLOR Ljava/lang/String; + public static final field BORDER_BLOCK_START_WIDTH Ljava/lang/String; + public static final field BORDER_BLOCK_WIDTH Ljava/lang/String; public static final field BORDER_BOTTOM_COLOR Ljava/lang/String; public static final field BORDER_BOTTOM_END_RADIUS Ljava/lang/String; public static final field BORDER_BOTTOM_LEFT_RADIUS Ljava/lang/String; @@ -4488,6 +4494,12 @@ public final class com/facebook/react/uimanager/ViewProps { public static final field BORDER_END_END_RADIUS Ljava/lang/String; public static final field BORDER_END_START_RADIUS Ljava/lang/String; public static final field BORDER_END_WIDTH Ljava/lang/String; + public static final field BORDER_INLINE_COLOR Ljava/lang/String; + public static final field BORDER_INLINE_END_COLOR Ljava/lang/String; + public static final field BORDER_INLINE_END_WIDTH Ljava/lang/String; + public static final field BORDER_INLINE_START_COLOR Ljava/lang/String; + public static final field BORDER_INLINE_START_WIDTH Ljava/lang/String; + public static final field BORDER_INLINE_WIDTH Ljava/lang/String; public static final field BORDER_LEFT_COLOR Ljava/lang/String; public static final field BORDER_LEFT_WIDTH Ljava/lang/String; public static final field BORDER_RADIUS Ljava/lang/String; @@ -4934,6 +4946,9 @@ public abstract class com/facebook/react/uimanager/style/LogicalEdge : java/lang public static final field Companion Lcom/facebook/react/uimanager/style/LogicalEdge$Companion; public static final field END Lcom/facebook/react/uimanager/style/LogicalEdge; public static final field HORIZONTAL Lcom/facebook/react/uimanager/style/LogicalEdge; + public static final field INLINE Lcom/facebook/react/uimanager/style/LogicalEdge; + public static final field INLINE_END Lcom/facebook/react/uimanager/style/LogicalEdge; + public static final field INLINE_START Lcom/facebook/react/uimanager/style/LogicalEdge; public static final field LEFT Lcom/facebook/react/uimanager/style/LogicalEdge; public static final field RIGHT Lcom/facebook/react/uimanager/style/LogicalEdge; public static final field START Lcom/facebook/react/uimanager/style/LogicalEdge; diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.kt index 2439018b76b1..3da5378a0fe0 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.kt @@ -71,7 +71,10 @@ public class Spacing(private val defaultValue: Float, private val spacing: Float spacingType == END || spacingType == BLOCK || spacingType == BLOCK_END || - spacingType == BLOCK_START + spacingType == BLOCK_START || + spacingType == INLINE || + spacingType == INLINE_END || + spacingType == INLINE_START ) { YogaConstants.UNDEFINED } else { @@ -169,6 +172,15 @@ public class Spacing(private val defaultValue: Float, private val spacing: Float /** Spacing type that represents the block start direction (top). E.g. `marginBlockStart`. */ public const val BLOCK_START: Int = 11 + /** Spacing type that represents inline directions (start, end). E.g. `marginInline`. */ + public const val INLINE: Int = 12 + + /** Spacing type that represents the inline end direction. E.g. `marginInlineEnd`. */ + public const val INLINE_END: Int = 13 + + /** Spacing type that represents the inline start direction. E.g. `marginInlineStart`. */ + public const val INLINE_START: Int = 14 + private val flagsMap = intArrayOf( 1, /*LEFT*/ @@ -183,6 +195,9 @@ public class Spacing(private val defaultValue: Float, private val spacing: Float 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, + 4096, /*INLINE*/ + 8192, /*INLINE_END*/ + 16384, /*INLINE_START*/ ) private fun newFullSpacingArray(): FloatArray { @@ -199,6 +214,9 @@ public class Spacing(private val defaultValue: Float, private val spacing: Float YogaConstants.UNDEFINED, YogaConstants.UNDEFINED, YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, ) } } diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt index 1d0a305b2f2b..3ded0d07c3a2 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt @@ -122,6 +122,12 @@ public object ViewProps { public const val BORDER_TOP_WIDTH: String = "borderTopWidth" public const val BORDER_RIGHT_WIDTH: String = "borderRightWidth" public const val BORDER_BOTTOM_WIDTH: String = "borderBottomWidth" + public const val BORDER_BLOCK_WIDTH: String = "borderBlockWidth" + public const val BORDER_BLOCK_END_WIDTH: String = "borderBlockEndWidth" + public const val BORDER_BLOCK_START_WIDTH: String = "borderBlockStartWidth" + public const val BORDER_INLINE_WIDTH: String = "borderInlineWidth" + public const val BORDER_INLINE_END_WIDTH: String = "borderInlineEndWidth" + public const val BORDER_INLINE_START_WIDTH: String = "borderInlineStartWidth" public const val BORDER_RADIUS: String = "borderRadius" public const val BORDER_TOP_LEFT_RADIUS: String = "borderTopLeftRadius" public const val BORDER_TOP_RIGHT_RADIUS: String = "borderTopRightRadius" @@ -135,6 +141,9 @@ public object ViewProps { public const val BORDER_BLOCK_COLOR: String = "borderBlockColor" public const val BORDER_BLOCK_END_COLOR: String = "borderBlockEndColor" public const val BORDER_BLOCK_START_COLOR: String = "borderBlockStartColor" + public const val BORDER_INLINE_COLOR: String = "borderInlineColor" + public const val BORDER_INLINE_END_COLOR: String = "borderInlineEndColor" + public const val BORDER_INLINE_START_COLOR: String = "borderInlineStartColor" public const val BORDER_TOP_START_RADIUS: String = "borderTopStartRadius" public const val BORDER_TOP_END_RADIUS: String = "borderTopEndRadius" public const val BORDER_BOTTOM_START_RADIUS: String = "borderBottomStartRadius" diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderColors.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderColors.kt index 4969be54eecb..743ab9511cbf 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderColors.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderColors.kt @@ -62,8 +62,10 @@ internal value class BorderColors( return when (layoutDirection) { LayoutDirection.LTR -> ColorEdges( - edgeColors[LogicalEdge.START.ordinal] + edgeColors[LogicalEdge.INLINE_START.ordinal] + ?: edgeColors[LogicalEdge.START.ordinal] ?: edgeColors[LogicalEdge.LEFT.ordinal] + ?: edgeColors[LogicalEdge.INLINE.ordinal] ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, @@ -73,8 +75,10 @@ internal value class BorderColors( ?: edgeColors[LogicalEdge.VERTICAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, - edgeColors[LogicalEdge.END.ordinal] + edgeColors[LogicalEdge.INLINE_END.ordinal] + ?: edgeColors[LogicalEdge.END.ordinal] ?: edgeColors[LogicalEdge.RIGHT.ordinal] + ?: edgeColors[LogicalEdge.INLINE.ordinal] ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, @@ -88,8 +92,10 @@ internal value class BorderColors( LayoutDirection.RTL -> if (I18nUtil.instance.doLeftAndRightSwapInRTL(context)) { ColorEdges( - edgeColors[LogicalEdge.END.ordinal] + edgeColors[LogicalEdge.INLINE_END.ordinal] + ?: edgeColors[LogicalEdge.END.ordinal] ?: edgeColors[LogicalEdge.RIGHT.ordinal] + ?: edgeColors[LogicalEdge.INLINE.ordinal] ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, @@ -99,8 +105,10 @@ internal value class BorderColors( ?: edgeColors[LogicalEdge.VERTICAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, - edgeColors[LogicalEdge.START.ordinal] + edgeColors[LogicalEdge.INLINE_START.ordinal] + ?: edgeColors[LogicalEdge.START.ordinal] ?: edgeColors[LogicalEdge.LEFT.ordinal] + ?: edgeColors[LogicalEdge.INLINE.ordinal] ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, @@ -113,8 +121,10 @@ internal value class BorderColors( ) } else { ColorEdges( - edgeColors[LogicalEdge.END.ordinal] + edgeColors[LogicalEdge.INLINE_END.ordinal] + ?: edgeColors[LogicalEdge.END.ordinal] ?: edgeColors[LogicalEdge.LEFT.ordinal] + ?: edgeColors[LogicalEdge.INLINE.ordinal] ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, @@ -124,8 +134,10 @@ internal value class BorderColors( ?: edgeColors[LogicalEdge.VERTICAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, - edgeColors[LogicalEdge.START.ordinal] + edgeColors[LogicalEdge.INLINE_START.ordinal] + ?: edgeColors[LogicalEdge.START.ordinal] ?: edgeColors[LogicalEdge.RIGHT.ordinal] + ?: edgeColors[LogicalEdge.INLINE.ordinal] ?: edgeColors[LogicalEdge.HORIZONTAL.ordinal] ?: edgeColors[LogicalEdge.ALL.ordinal] ?: Color.BLACK, diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderInsets.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderInsets.kt index 26ed8034f97f..57b412e6f9e6 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderInsets.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderInsets.kt @@ -51,24 +51,28 @@ internal class BorderInsets { return when (layoutDirection) { LayoutDirection.LTR -> RectF( - edgeInsets[LogicalEdge.START.ordinal] + edgeInsets[LogicalEdge.INLINE_START.ordinal] + ?: edgeInsets[LogicalEdge.START.ordinal] ?: edgeInsets[LogicalEdge.LEFT.ordinal] + ?: edgeInsets[LogicalEdge.INLINE.ordinal] ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.BLOCK_START.ordinal] - ?: edgeInsets[LogicalEdge.TOP.ordinal] + edgeInsets[LogicalEdge.TOP.ordinal] + ?: edgeInsets[LogicalEdge.BLOCK_START.ordinal] ?: edgeInsets[LogicalEdge.BLOCK.ordinal] ?: edgeInsets[LogicalEdge.VERTICAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.END.ordinal] + edgeInsets[LogicalEdge.INLINE_END.ordinal] + ?: edgeInsets[LogicalEdge.END.ordinal] ?: edgeInsets[LogicalEdge.RIGHT.ordinal] + ?: edgeInsets[LogicalEdge.INLINE.ordinal] ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.BLOCK_END.ordinal] - ?: edgeInsets[LogicalEdge.BOTTOM.ordinal] + edgeInsets[LogicalEdge.BOTTOM.ordinal] + ?: edgeInsets[LogicalEdge.BLOCK_END.ordinal] ?: edgeInsets[LogicalEdge.BLOCK.ordinal] ?: edgeInsets[LogicalEdge.VERTICAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] @@ -77,24 +81,28 @@ internal class BorderInsets { LayoutDirection.RTL -> if (I18nUtil.instance.doLeftAndRightSwapInRTL(context)) { RectF( - edgeInsets[LogicalEdge.END.ordinal] + edgeInsets[LogicalEdge.INLINE_END.ordinal] + ?: edgeInsets[LogicalEdge.END.ordinal] ?: edgeInsets[LogicalEdge.RIGHT.ordinal] + ?: edgeInsets[LogicalEdge.INLINE.ordinal] ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.BLOCK_START.ordinal] - ?: edgeInsets[LogicalEdge.TOP.ordinal] + edgeInsets[LogicalEdge.TOP.ordinal] + ?: edgeInsets[LogicalEdge.BLOCK_START.ordinal] ?: edgeInsets[LogicalEdge.BLOCK.ordinal] ?: edgeInsets[LogicalEdge.VERTICAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.START.ordinal] + edgeInsets[LogicalEdge.INLINE_START.ordinal] + ?: edgeInsets[LogicalEdge.START.ordinal] ?: edgeInsets[LogicalEdge.LEFT.ordinal] + ?: edgeInsets[LogicalEdge.INLINE.ordinal] ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.BLOCK_END.ordinal] - ?: edgeInsets[LogicalEdge.BOTTOM.ordinal] + edgeInsets[LogicalEdge.BOTTOM.ordinal] + ?: edgeInsets[LogicalEdge.BLOCK_END.ordinal] ?: edgeInsets[LogicalEdge.BLOCK.ordinal] ?: edgeInsets[LogicalEdge.VERTICAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] @@ -102,24 +110,28 @@ internal class BorderInsets { ) } else { RectF( - edgeInsets[LogicalEdge.END.ordinal] + edgeInsets[LogicalEdge.INLINE_END.ordinal] + ?: edgeInsets[LogicalEdge.END.ordinal] ?: edgeInsets[LogicalEdge.LEFT.ordinal] + ?: edgeInsets[LogicalEdge.INLINE.ordinal] ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.BLOCK_START.ordinal] - ?: edgeInsets[LogicalEdge.TOP.ordinal] + edgeInsets[LogicalEdge.TOP.ordinal] + ?: edgeInsets[LogicalEdge.BLOCK_START.ordinal] ?: edgeInsets[LogicalEdge.BLOCK.ordinal] ?: edgeInsets[LogicalEdge.VERTICAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.START.ordinal] + edgeInsets[LogicalEdge.INLINE_START.ordinal] + ?: edgeInsets[LogicalEdge.START.ordinal] ?: edgeInsets[LogicalEdge.RIGHT.ordinal] + ?: edgeInsets[LogicalEdge.INLINE.ordinal] ?: edgeInsets[LogicalEdge.HORIZONTAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] ?: 0f, - edgeInsets[LogicalEdge.BLOCK_END.ordinal] - ?: edgeInsets[LogicalEdge.BOTTOM.ordinal] + edgeInsets[LogicalEdge.BOTTOM.ordinal] + ?: edgeInsets[LogicalEdge.BLOCK_END.ordinal] ?: edgeInsets[LogicalEdge.BLOCK.ordinal] ?: edgeInsets[LogicalEdge.VERTICAL.ordinal] ?: edgeInsets[LogicalEdge.ALL.ordinal] diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LogicalEdge.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LogicalEdge.kt index bde6db488830..96c8f484e4d3 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LogicalEdge.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LogicalEdge.kt @@ -67,13 +67,17 @@ public enum class LogicalEdge { /** Shorthand for block-start and block-end edges. */ BLOCK { override fun toSpacingType(): Int = Spacing.BLOCK + }, + INLINE_START { + override fun toSpacingType(): Int = Spacing.INLINE_START + }, + INLINE_END { + override fun toSpacingType(): Int = Spacing.INLINE_END + }, + INLINE { + override fun toSpacingType(): Int = Spacing.INLINE }; - // TODO: not supported by Spacing users - // INLINE_START, - // INLINE_END, - // INLINE; - /** * Converts this logical edge to the corresponding Spacing type constant. * @@ -104,6 +108,9 @@ public enum class LogicalEdge { Spacing.BLOCK_START -> BLOCK_START Spacing.BLOCK_END -> BLOCK_END Spacing.BLOCK -> BLOCK + Spacing.INLINE_START -> INLINE_START + Spacing.INLINE_END -> INLINE_END + Spacing.INLINE -> INLINE else -> throw IllegalArgumentException("Unknown spacing type: $spacingType") } } diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt index 21ef11182da3..e7c71c6f32bf 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt @@ -58,6 +58,9 @@ public open class ReactViewManager : ReactClippingViewManager() Spacing.BLOCK, Spacing.BLOCK_END, Spacing.BLOCK_START, + Spacing.INLINE, + Spacing.INLINE_END, + Spacing.INLINE_START, ) private const val CMD_HOTSPOT_UPDATE = 1 private const val CMD_SET_PRESSED = 2 @@ -376,11 +379,21 @@ public open class ReactViewManager : ReactClippingViewManager() ViewProps.BORDER_BOTTOM_WIDTH, ViewProps.BORDER_START_WIDTH, ViewProps.BORDER_END_WIDTH, + ViewProps.BORDER_BLOCK_WIDTH, + ViewProps.BORDER_BLOCK_END_WIDTH, + ViewProps.BORDER_BLOCK_START_WIDTH, + ViewProps.BORDER_INLINE_WIDTH, + ViewProps.BORDER_INLINE_END_WIDTH, + ViewProps.BORDER_INLINE_START_WIDTH, ], defaultFloat = Float.NaN, ) public open fun setBorderWidth(view: ReactViewGroup, index: Int, width: Float) { - BackgroundStyleApplicator.setBorderWidth(view, LogicalEdge.values()[index], width) + BackgroundStyleApplicator.setBorderWidth( + view, + LogicalEdge.fromSpacingType(SPACING_TYPES[index]), + width, + ) } @ReactPropGroup( @@ -396,6 +409,9 @@ public open class ReactViewManager : ReactClippingViewManager() ViewProps.BORDER_BLOCK_COLOR, ViewProps.BORDER_BLOCK_END_COLOR, ViewProps.BORDER_BLOCK_START_COLOR, + ViewProps.BORDER_INLINE_COLOR, + ViewProps.BORDER_INLINE_END_COLOR, + ViewProps.BORDER_INLINE_START_COLOR, ], customType = "Color", ) diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp index e5611b65bb49..98332197d3fb 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp @@ -105,6 +105,9 @@ BaseViewProps::BaseViewProps( .block = "borderBlockColor", .blockEnd = "borderBlockEndColor", .blockStart = "borderBlockStartColor", + .inline_ = "borderInlineColor", + .inlineEnd = "borderInlineEndColor", + .inlineStart = "borderInlineStartColor", .all = "borderColor"}, sourceProps.borderColors, {})), @@ -142,6 +145,9 @@ BaseViewProps::BaseViewProps( .block = "borderBlockStyle", .blockEnd = "borderBlockEndStyle", .blockStart = "borderBlockStartStyle", + .inline_ = "borderInlineStyle", + .inlineEnd = "borderInlineEndStyle", + .inlineStart = "borderInlineStartStyle", .all = "borderStyle"}, sourceProps.borderStyles, {})), @@ -513,18 +519,23 @@ static BorderRadii radiiPercentToPoint( } CascadedBorderWidths BaseViewProps::getBorderWidths() const { + auto pick = [](const yoga::Style::Length& value, + const yoga::Style::Length& fallback) { + return optionalFloatFromYogaValue(value.isDefined() ? value : fallback); + }; + return CascadedBorderWidths{ .left = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Left)), - .top = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Top)), + .top = pick(yogaStyle.border(yoga::Edge::Top), borderBlockStartWidth), .right = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Right)), - .bottom = - optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Bottom)), - .start = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Start)), - .end = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::End)), + .bottom = pick(yogaStyle.border(yoga::Edge::Bottom), borderBlockEndWidth), + .start = + pick(borderInlineStartWidth, yogaStyle.border(yoga::Edge::Start)), + .end = pick(borderInlineEndWidth, yogaStyle.border(yoga::Edge::End)), .horizontal = - optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Horizontal)), + pick(borderInlineWidth, yogaStyle.border(yoga::Edge::Horizontal)), .vertical = - optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::Vertical)), + pick(borderBlockWidth, yogaStyle.border(yoga::Edge::Vertical)), .all = optionalFloatFromYogaValue(yogaStyle.border(yoga::Edge::All)), }; } diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp index b3d396e263c1..5dca96365803 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp @@ -38,7 +38,12 @@ void ViewShadowNode::initialize() noexcept { return true; } } - return false; + return viewProps.borderBlockWidth.isDefined() || + viewProps.borderBlockStartWidth.isDefined() || + viewProps.borderBlockEndWidth.isDefined() || + viewProps.borderInlineWidth.isDefined() || + viewProps.borderInlineStartWidth.isDefined() || + viewProps.borderInlineEndWidth.isDefined(); }; bool formsStackingContext = !viewProps.collapsable || 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 cca684c33824..ae5b0dd6e803 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp @@ -467,6 +467,18 @@ void YogaLayoutableShadowNode::updateYogaProps() { if (props.paddingBlock.isDefined()) { result.setPadding(yoga::Edge::Vertical, props.paddingBlock); } + if (props.borderBlockWidth.isDefined()) { + result.setBorder(yoga::Edge::Vertical, props.borderBlockWidth); + } + if (props.borderInlineWidth.isDefined()) { + result.setBorder(yoga::Edge::Horizontal, props.borderInlineWidth); + } + if (props.borderInlineStartWidth.isDefined()) { + result.setBorder(yoga::Edge::Start, props.borderInlineStartWidth); + } + if (props.borderInlineEndWidth.isDefined()) { + result.setBorder(yoga::Edge::End, props.borderInlineEndWidth); + } // Aliases without precedence if (result.position(yoga::Edge::Bottom).isUndefined()) { @@ -487,6 +499,12 @@ void YogaLayoutableShadowNode::updateYogaProps() { if (result.padding(yoga::Edge::Bottom).isUndefined()) { result.setPadding(yoga::Edge::Bottom, props.paddingBlockEnd); } + if (result.border(yoga::Edge::Top).isUndefined()) { + result.setBorder(yoga::Edge::Top, props.borderBlockStartWidth); + } + if (result.border(yoga::Edge::Bottom).isUndefined()) { + result.setBorder(yoga::Edge::Bottom, props.borderBlockEndWidth); + } return result; } 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 2047c5b303b4..a0ab0a10793f 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp @@ -173,6 +173,13 @@ void YogaStylableProps::setProp( RAW_SET_PROP_SWITCH_CASE(paddingBlock, "paddingBlock"); RAW_SET_PROP_SWITCH_CASE(paddingBlockStart, "paddingBlockStart"); RAW_SET_PROP_SWITCH_CASE(paddingBlockEnd, "paddingBlockEnd"); + RAW_SET_PROP_SWITCH_CASE(borderBlockWidth, "borderBlockWidth"); + RAW_SET_PROP_SWITCH_CASE(borderBlockStartWidth, "borderBlockStartWidth"); + RAW_SET_PROP_SWITCH_CASE(borderBlockEndWidth, "borderBlockEndWidth"); + RAW_SET_PROP_SWITCH_CASE(borderInlineWidth, "borderInlineWidth"); + RAW_SET_PROP_SWITCH_CASE( + borderInlineStartWidth, "borderInlineStartWidth"); + RAW_SET_PROP_SWITCH_CASE(borderInlineEndWidth, "borderInlineEndWidth"); } } @@ -512,6 +519,43 @@ void YogaStylableProps::convertRawPropAliases( "paddingBlockEnd", sourceProps.paddingBlockEnd, yoga::StyleLength::undefined()); + + borderBlockWidth = convertRawProp( + context, + rawProps, + "borderBlockWidth", + sourceProps.borderBlockWidth, + yoga::StyleLength::undefined()); + borderBlockStartWidth = convertRawProp( + context, + rawProps, + "borderBlockStartWidth", + sourceProps.borderBlockStartWidth, + yoga::StyleLength::undefined()); + borderBlockEndWidth = convertRawProp( + context, + rawProps, + "borderBlockEndWidth", + sourceProps.borderBlockEndWidth, + yoga::StyleLength::undefined()); + borderInlineWidth = convertRawProp( + context, + rawProps, + "borderInlineWidth", + sourceProps.borderInlineWidth, + yoga::StyleLength::undefined()); + borderInlineStartWidth = convertRawProp( + context, + rawProps, + "borderInlineStartWidth", + sourceProps.borderInlineStartWidth, + yoga::StyleLength::undefined()); + borderInlineEndWidth = convertRawProp( + context, + rawProps, + "borderInlineEndWidth", + sourceProps.borderInlineEndWidth, + yoga::StyleLength::undefined()); } } // namespace facebook::react 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 42fca6ce6cf4..d087725a15fe 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h @@ -47,6 +47,11 @@ class YogaStylableProps : public Props { yoga::Style::Length paddingInlineEnd; yoga::Style::Length paddingBlock; + yoga::Style::Length borderBlockWidth; + yoga::Style::Length borderInlineWidth; + yoga::Style::Length borderInlineStartWidth; + yoga::Style::Length borderInlineEndWidth; + // 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). @@ -59,6 +64,9 @@ class YogaStylableProps : public Props { yoga::Style::Length paddingBlockStart; yoga::Style::Length paddingBlockEnd; + yoga::Style::Length borderBlockStartWidth; + yoga::Style::Length borderBlockEndWidth; + #if RN_DEBUG_STRING_CONVERTIBLE #pragma mark - DebugStringConvertible (Partial) diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp index 2f2820422161..51aeef681f61 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp @@ -340,6 +340,21 @@ static void updateBorderColorsProps( "borderBlockStartColor", newBorderColor.blockStart, oldBorderColor.blockStart); + updateBorderColorPropValue( + result, + "borderInlineColor", + newBorderColor.inline_, + oldBorderColor.inline_); + updateBorderColorPropValue( + result, + "borderInlineEndColor", + newBorderColor.inlineEnd, + oldBorderColor.inlineEnd); + updateBorderColorPropValue( + result, + "borderInlineStartColor", + newBorderColor.inlineStart, + oldBorderColor.inlineStart); } inline static void updateNativeDrawableProp( diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h b/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h index 6c6e5b4def92..f37c136ea23c 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h @@ -160,12 +160,17 @@ struct CascadedRectangleEdges { OptionalT block{}; OptionalT blockStart{}; OptionalT blockEnd{}; + OptionalT inline_{}; + OptionalT inlineStart{}; + OptionalT inlineEnd{}; Counterpart resolve(bool isRTL, T defaults) const { - const auto leadingEdge = isRTL ? end : start; - const auto trailingEdge = isRTL ? start : end; - const auto horizontalOrAllOrDefault = horizontal.value_or(all.value_or(defaults)); + const auto startEdge = inlineStart ? inlineStart : start; + const auto endEdge = inlineEnd ? inlineEnd : end; + const auto leadingEdge = isRTL ? endEdge : startEdge; + const auto trailingEdge = isRTL ? startEdge : endEdge; + const auto horizontalOrAllOrDefault = inline_.value_or(horizontal.value_or(all.value_or(defaults))); const auto verticalOrAllOrDefault = vertical.value_or(all.value_or(defaults)); return { diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h index 8483e5981dc6..9d4fc75dfeb7 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/propsConversions.h @@ -401,6 +401,9 @@ struct CascadedRectangleEdgesNames { const char *block; const char *blockEnd; const char *blockStart; + const char *inline_; + const char *inlineEnd; + const char *inlineStart; const char *all; }; @@ -462,6 +465,10 @@ static inline CascadedRectangleEdges convertRawProp( result.blockEnd = convertRawProp(context, rawProps, names.blockEnd, sourceValue.blockEnd, defaultValue.blockEnd); result.blockStart = convertRawProp(context, rawProps, names.blockStart, sourceValue.blockStart, defaultValue.blockStart); + result.inline_ = convertRawProp(context, rawProps, names.inline_, sourceValue.inline_, defaultValue.inline_); + result.inlineEnd = convertRawProp(context, rawProps, names.inlineEnd, sourceValue.inlineEnd, defaultValue.inlineEnd); + result.inlineStart = + convertRawProp(context, rawProps, names.inlineStart, sourceValue.inlineStart, defaultValue.inlineStart); result.all = convertRawProp(context, rawProps, names.all, sourceValue.all, defaultValue.all); diff --git a/packages/react-native/ReactCommon/react/renderer/core/PropsMacros.h b/packages/react-native/ReactCommon/react/renderer/core/PropsMacros.h index cb1ad5bb93ef..4f883823d7e6 100644 --- a/packages/react-native/ReactCommon/react/renderer/core/PropsMacros.h +++ b/packages/react-native/ReactCommon/react/renderer/core/PropsMacros.h @@ -82,7 +82,10 @@ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED(struct, all, prefix "" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED(struct, block, prefix "Block" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED(struct, blockEnd, prefix "BlockEnd" suffix, rawValue) \ - CASE_STATEMENT_SET_FIELD_VALUE_INDEXED(struct, blockStart, prefix "BlockStart" suffix, rawValue) + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED(struct, blockStart, prefix "BlockStart" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED(struct, inline_, prefix "Inline" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED(struct, inlineEnd, prefix "InlineEnd" suffix, rawValue) \ + CASE_STATEMENT_SET_FIELD_VALUE_INDEXED(struct, inlineStart, prefix "InlineStart" suffix, rawValue) // Rebuild a type that contains multiple fields from a single field value #define REBUILD_FIELD_SWITCH_CASE(defaults, rawValue, property, field, fieldName) \ diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index 61d596303692..6d0420521120 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/packages/react-native/ReactNativeApi.d.ts @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<<700a3fc87e57596903b6cf32a165eeb9>> + * @generated SignedSource<> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -639,8 +639,14 @@ declare type ____LayoutStyle_Internal = { readonly alignSelf?: "auto" | "baseline" | "center" | "flex-end" | "flex-start" | "stretch" readonly aspectRatio?: number | string + readonly borderBlockEndWidth?: number + readonly borderBlockStartWidth?: number + readonly borderBlockWidth?: number readonly borderBottomWidth?: number readonly borderEndWidth?: number + readonly borderInlineEndWidth?: number + readonly borderInlineStartWidth?: number + readonly borderInlineWidth?: number readonly borderLeftWidth?: number readonly borderRightWidth?: number readonly borderStartWidth?: number @@ -843,7 +849,10 @@ declare type ____ViewStyle_InternalBase = { readonly backgroundSize?: ReadonlyArray | string readonly borderBlockColor?: ____ColorValue_Internal readonly borderBlockEndColor?: ____ColorValue_Internal + readonly borderBlockEndWidth?: number readonly borderBlockStartColor?: ____ColorValue_Internal + readonly borderBlockStartWidth?: number + readonly borderBlockWidth?: number readonly borderBottomColor?: ____ColorValue_Internal readonly borderBottomEndRadius?: number | string readonly borderBottomLeftRadius?: number | string @@ -856,6 +865,12 @@ declare type ____ViewStyle_InternalBase = { readonly borderEndEndRadius?: number | string readonly borderEndStartRadius?: number | string readonly borderEndWidth?: number + readonly borderInlineColor?: ____ColorValue_Internal + readonly borderInlineEndColor?: ____ColorValue_Internal + readonly borderInlineEndWidth?: number + readonly borderInlineStartColor?: ____ColorValue_Internal + readonly borderInlineStartWidth?: number + readonly borderInlineWidth?: number readonly borderLeftColor?: ____ColorValue_Internal readonly borderLeftWidth?: number readonly borderRadius?: number | string @@ -5860,24 +5875,24 @@ export { AccessibilityValue, // cf8bcb74 ActionSheetIOS, // b558559e ActionSheetIOSOptions, // 1756eb5a - ActivityIndicator, // b9f6c361 + ActivityIndicator, // fe0c8c52 ActivityIndicatorInstance, // 203a7308 - ActivityIndicatorProps, // 45a4dd7e + ActivityIndicatorProps, // 9a22ca75 Alert, // a398a509 AlertButton, // bf1a3b60 AlertButtonStyle, // ec9fb242 AlertOptions, // 8a116d2a AlertType, // 5ab91217 AndroidKeyboardEvent, // e03becc8 - Animated, // eabf9148 - AnimatedFlatList, // 7dd37b2f - AnimatedImage, // 70a521de - AnimatedScrollView, // 6e7d4228 - AnimatedSectionList, // ae393fe9 - AnimatedText, // 55bc68a2 - AnimatedView, // ed267c3c + Animated, // bcb3d8f2 + AnimatedFlatList, // 3a347e1e + AnimatedImage, // a339e403 + AnimatedScrollView, // 731aa1e8 + AnimatedSectionList, // fd7b5dee + AnimatedText, // 326ab5cb + AnimatedView, // a2b939d4 AppConfig, // 80afc5fa - AppRegistry, // b906537d + AppRegistry, // a9925121 AppState, // db34d225 AppStateEvent, // 80f034c3 AppStateStatus, // 447e5ef2 @@ -5889,8 +5904,8 @@ export { BackPressEventName, // 4620fb76 BlurEvent, // 81e2d52d BoxShadowValue, // b679703f - Button, // a8154deb - ButtonInstance, // 2171b004 + Button, // ae77caee + ButtonInstance, // fb5626fd ButtonProps, // 39ba1271 CodegenTypes, // 8225fbd1 ColorSchemeName, // 6615edd6 @@ -5908,9 +5923,9 @@ export { DimensionsPayload, // 653bc26c DisplayMetrics, // 1dc35cef DisplayMetricsAndroid, // 872e62eb - DrawerLayoutAndroid, // e17f5c7f + DrawerLayoutAndroid, // ece6b26d DrawerLayoutAndroidInstance, // aa243cbf - DrawerLayoutAndroidProps, // 888a0cd8 + DrawerLayoutAndroidProps, // e4efa7b7 DrawerSlideEvent, // 4fa8f7ff DropShadowValue, // e9df2606 DynamicColorIOS, // d96c228c @@ -5926,9 +5941,9 @@ export { EventSubscription, // b8d084aa ExtendedExceptionData, // 5a6ccf5a FilterFunction, // bf24c0e3 - FlatList, // 93582d36 - FlatListInstance, // 44658d70 - FlatListProps, // 9bd2f266 + FlatList, // 14d9a434 + FlatListInstance, // 1ed84c9f + FlatListProps, // c6935142 FocusEvent, // eaa2af9d FontVariant, // 7c7558bb GestureResponderEvent, // 8a8611e2 @@ -5939,17 +5954,17 @@ export { IEventEmitter, // fbef6131 IOSKeyboardEvent, // e67bfe3a IgnorePattern, // ec6f6ece - Image, // 525435c5 - ImageBackground, // d15d8abb - ImageBackgroundInstance, // 87cb3a96 - ImageBackgroundProps, // 3c909664 + Image, // 2cff79fb + ImageBackground, // 6a7c4c44 + ImageBackgroundInstance, // 35930100 + ImageBackgroundProps, // df77bd26 ImageErrorEvent, // 91b7bd15 ImageInstance, // f5ca8548 ImageLoadEvent, // 26c72f36 ImageProgressEventIOS, // 78694e24 - ImageProps, // d0584850 + ImageProps, // 551c4848 ImagePropsAndroid, // 283349a4 - ImagePropsBase, // 6203d7f7 + ImagePropsBase, // 93d21777 ImagePropsIOS, // ebd30376 ImageRequireSource, // 681d683b ImageResizeMode, // d51106e2 @@ -5957,19 +5972,19 @@ export { ImageSize, // 1c47cf88 ImageSource, // bba5e24d ImageSourcePropType, // ff97c174 - ImageStyle, // 85dc694a + ImageStyle, // 2112f35d ImageURISource, // 9bf63692 - InputAccessoryView, // ab6e2a66 - InputAccessoryViewProps, // 73685b83 + InputAccessoryView, // 0416dc2b + InputAccessoryViewProps, // 9ade9e08 InputModeOptions, // 4e8581b9 Insets, // e7fe432a KeyDownEvent, // cc4773b1 KeyEvent, // 20fa4267 KeyUpEvent, // c4e5a70b Keyboard, // a26f7bd4 - KeyboardAvoidingView, // 668b6171 - KeyboardAvoidingViewInstance, // ce03459c - KeyboardAvoidingViewProps, // 53cc84d8 + KeyboardAvoidingView, // 0bb246a3 + KeyboardAvoidingViewInstance, // 0e9e61ab + KeyboardAvoidingViewProps, // 52ab1132 KeyboardEvent, // c3f895d4 KeyboardEventEasing, // af4091c8 KeyboardEventName, // 59299ad6 @@ -5994,10 +6009,10 @@ export { MeasureInWindowOnSuccessCallback, // a285f598 MeasureLayoutOnSuccessCallback, // 3592502a MeasureOnSuccessCallback, // 82824e59 - Modal, // d422cbdb + Modal, // df37ff4c ModalBaseProps, // fe84ee7f ModalInstance, // e66062fb - ModalProps, // ee71f2ac + ModalProps, // 5b8b3363 ModalPropsAndroid, // 515fb173 ModalPropsIOS, // 2b335b15 ModeChangeEvent, // 9ccef558 @@ -6033,15 +6048,15 @@ export { PointerEvent, // 06310bdb PressabilityConfig, // ed721435 PressabilityEventHandlers, // 314a0b05 - Pressable, // b430b931 + Pressable, // edb595a5 PressableAndroidRippleConfig, // ee32eaca PressableInstance, // a13c73cb - PressableProps, // 5f06b483 + PressableProps, // aec4a27f PressableStateCallbackType, // f83728cd ProcessedColorValue, // 33f74304 - ProgressBarAndroid, // 7d199258 + ProgressBarAndroid, // 07b6f9ac ProgressBarAndroidInstance, // e25bcc95 - ProgressBarAndroidProps, // 07593242 + ProgressBarAndroidProps, // a2a2b9f2 PublicRootInstance, // 8040afd7 PublicTextInstance, // 42c897b3 PushNotificationEventName, // 84e7e150 @@ -6049,9 +6064,9 @@ export { PushNotificationPermissions, // c2e7ae4f Rationale, // 5df1b1c1 ReactNativeVersion, // abd76827 - RefreshControl, // db42b24c - RefreshControlInstance, // fd5c0365 - RefreshControlProps, // e839b56d + RefreshControl, // cc880c33 + RefreshControlInstance, // 84473754 + RefreshControlProps, // 32b50edb RefreshControlPropsAndroid, // 8ac931ca RefreshControlPropsIOS, // 72a36381 Registry, // e7beb42e @@ -6060,29 +6075,29 @@ export { Role, // af7b889d RootTag, // 3cd10504 RootTagContext, // 38bfc8f6 - RootViewStyleProvider, // 716d0b7f + RootViewStyleProvider, // 8aa32d1d Runnable, // 557d13d9 Runnables, // 75114853 SafeAreaInsets, // 64d7a605 SafeAreaInsetsChangeEvent, // e63da69b - SafeAreaView, // c3188b34 + SafeAreaView, // 95b4940a SafeAreaViewInstance, // 620923d2 ScaledSize, // 07e417c7 ScrollEvent, // 5b300f75 - ScrollResponderType, // d454c555 + ScrollResponderType, // 9e95e078 ScrollToLocationParamsType, // d7ecdad1 - ScrollView, // ded391d4 - ScrollViewImperativeMethods, // bbff2b8c - ScrollViewInstance, // a59c167a - ScrollViewProps, // 0f5f149e + ScrollView, // 2756301c + ScrollViewImperativeMethods, // d81741f3 + ScrollViewInstance, // c7d59518 + ScrollViewProps, // d56f3fda ScrollViewPropsAndroid, // 02f3df2e ScrollViewPropsIOS, // b2cf82e0 ScrollViewScrollToOptions, // 3313411e SectionBase, // 9f13db00 - SectionList, // 0c0b716d + SectionList, // b10094a3 SectionListData, // 1a4de01a - SectionListInstance, // 2ce6ff23 - SectionListProps, // 270e3f29 + SectionListInstance, // b7f6c0ab + SectionListProps, // 68b989c0 SectionListRenderItem, // 715b2086 SectionListRenderItemInfo, // 4a48a922 Separators, // 6a45f7e3 @@ -6100,19 +6115,19 @@ export { StatusBarStyle, // 78f53eea StatusBarVerticalBarEdgeIOS, // f0ffbe54 StyleProp, // fa0e9b4a - StyleSheet, // cf156a8b + StyleSheet, // 72b902eb SubmitBehavior, // c4ddf490 - Switch, // b810ece4 + Switch, // bfd0a508 SwitchChangeEvent, // 4d12c11f SwitchInstance, // 389a240b - SwitchProps, // c86198ca + SwitchProps, // 9d68710b Systrace, // 2a0a0871 TVViewPropsIOS, // 1c612e4e TargetedEvent, // 16e98910 TaskProvider, // 266dedf2 - Text, // 841fd00c + Text, // 3ad7bcd1 TextContentType, // 239b3ecc - TextInput, // f4502971 + TextInput, // 68acc3b7 TextInputAndroidProps, // 9ebbc103 TextInputBlurEvent, // c04c4bf0 TextInputChangeEvent, // ed7f8b04 @@ -6122,46 +6137,46 @@ export { TextInputIOSProps, // fb3c9327 TextInputInstance, // d442c53f TextInputKeyPressEvent, // 07548cd0 - TextInputProps, // 0166e0c9 + TextInputProps, // f214d587 TextInputSelectionChangeEvent, // 131f3be5 TextInputSubmitEditingEvent, // f2ad5e3b TextInstance, // 5d4340ff TextLayoutEvent, // bcd28f9a - TextProps, // 78881b55 - TextStyle, // 898adfd1 + TextProps, // 571ab18f + TextStyle, // 55ea5e42 ToastAndroid, // 88a8969a - TouchableHighlight, // c355bdc0 + TouchableHighlight, // bc8bffc6 TouchableHighlightInstance, // 86235e9b - TouchableHighlightProps, // 9d69cf73 - TouchableNativeFeedback, // aa19af38 - TouchableNativeFeedbackInstance, // 063cefb1 - TouchableNativeFeedbackProps, // 8c37965a - TouchableOpacity, // f7c31bda + TouchableHighlightProps, // 063afb56 + TouchableNativeFeedback, // 19d8d487 + TouchableNativeFeedbackInstance, // 2568cc4f + TouchableNativeFeedbackProps, // 6a6947b0 + TouchableOpacity, // 53bd790c TouchableOpacityInstance, // 174a3ad9 - TouchableOpacityProps, // 839b5f73 - TouchableWithoutFeedback, // 3371c1e0 - TouchableWithoutFeedbackProps, // 86d9d4ef + TouchableOpacityProps, // d4f49375 + TouchableWithoutFeedback, // eea05ce8 + TouchableWithoutFeedbackProps, // aa8ab03d TransformsStyle, // 65e70f18 TurboModule, // dfe29706 TurboModuleRegistry, // 4ace6db2 UIManager, // 6a18fc05 UTFSequence, // ad625158 Vibration, // 31e4bbf8 - View, // 37dd3f10 + View, // f64fe5f4 ViewInstance, // da166ce1 - ViewProps, // 0a38b735 + ViewProps, // 23a31323 ViewPropsAndroid, // 66397d7f ViewPropsIOS, // 58ee19bf - ViewStyle, // 4e2746d6 + ViewStyle, // ab163328 ViewabilityConfig, // eb3f7ed8 ViewabilityConfigCallbackPair, // bdd0788c VirtualViewMode, // 6be59722 VirtualizedList, // 68c7345e VirtualizedListInstance, // 423ee7c0 - VirtualizedListProps, // 7eb90be3 + VirtualizedListProps, // 161137ec VirtualizedSectionList, // 9fd9cd61 VirtualizedSectionListInstance, // 12b706d5 - VirtualizedSectionListProps, // 645dfd17 + VirtualizedSectionListProps, // 6e8e7191 WrapperComponentProvider, // 6ce47ba4 codegenNativeCommands, // 322f3f4e codegenNativeComponent, // c9cccb03 diff --git a/packages/react-native/__typetests__/stylesheet-style-props.tsx b/packages/react-native/__typetests__/stylesheet-style-props.tsx index 30d412b06593..e46d7eb0441c 100644 --- a/packages/react-native/__typetests__/stylesheet-style-props.tsx +++ b/packages/react-native/__typetests__/stylesheet-style-props.tsx @@ -46,6 +46,9 @@ const imageStyle: ImageStyle = { borderBlockStartColor: 'red', borderBottomColor: 'red', borderEndColor: 'red', + borderInlineColor: 'red', + borderInlineEndColor: 'red', + borderInlineStartColor: 'red', borderLeftColor: 'red', borderRightColor: 'red', borderStartColor: 'red', diff --git a/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts index 478e9d092195..76b0faff97b4 100644 --- a/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -39,8 +39,14 @@ export interface FlexStyle { alignItems?: FlexAlignType | undefined; alignSelf?: 'auto' | FlexAlignType | undefined; aspectRatio?: number | string | undefined; + borderBlockEndWidth?: number | undefined; + borderBlockStartWidth?: number | undefined; + borderBlockWidth?: number | undefined; borderBottomWidth?: number | undefined; borderEndWidth?: number | undefined; + borderInlineEndWidth?: number | undefined; + borderInlineStartWidth?: number | undefined; + borderInlineWidth?: number | undefined; borderLeftWidth?: number | undefined; borderRightWidth?: number | undefined; borderStartWidth?: number | undefined; @@ -463,6 +469,9 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { borderEndColor?: ColorValue | undefined; borderEndEndRadius?: AnimatableNumericValue | string | undefined; borderEndStartRadius?: AnimatableNumericValue | string | undefined; + borderInlineColor?: ColorValue | undefined; + borderInlineEndColor?: ColorValue | undefined; + borderInlineStartColor?: ColorValue | undefined; borderLeftColor?: ColorValue | undefined; borderRadius?: AnimatableNumericValue | string | undefined; borderRightColor?: ColorValue | undefined; diff --git a/scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api b/scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api index 912089515add..a40f8749afcd 100644 --- a/scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api @@ -2587,6 +2587,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -4601,6 +4607,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactAndroidFrameworksCxx.api b/scripts/cxx-api/api-snapshots/ReactAndroidFrameworksCxx.api index 2567b4e72da9..9f96637a09cc 100644 --- a/scripts/cxx-api/api-snapshots/ReactAndroidFrameworksCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactAndroidFrameworksCxx.api @@ -4436,6 +4436,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -7740,6 +7746,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api b/scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api index 34b1da7689bb..5f90a3a283b8 100644 --- a/scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api @@ -2580,6 +2580,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -4594,6 +4600,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api b/scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api index 34b1da7689bb..5f90a3a283b8 100644 --- a/scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api @@ -2580,6 +2580,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -4594,6 +4600,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api b/scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api index 65b1426db47e..741302ec6b95 100644 --- a/scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api @@ -4732,6 +4732,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -6454,6 +6460,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactAppleFrameworksCxx.api b/scripts/cxx-api/api-snapshots/ReactAppleFrameworksCxx.api index ec76e48de457..a1a2d0c1201d 100644 --- a/scripts/cxx-api/api-snapshots/ReactAppleFrameworksCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactAppleFrameworksCxx.api @@ -6555,6 +6555,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -9608,6 +9614,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactAppleNewarchCxx.api b/scripts/cxx-api/api-snapshots/ReactAppleNewarchCxx.api index c8c92eb83ed1..e1daf4044e55 100644 --- a/scripts/cxx-api/api-snapshots/ReactAppleNewarchCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactAppleNewarchCxx.api @@ -4718,6 +4718,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -6440,6 +6446,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api b/scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api index 3ebc82e69ba0..b4af690057c3 100644 --- a/scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api @@ -4725,6 +4725,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -6447,6 +6453,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactCommonDebugCxx.api b/scripts/cxx-api/api-snapshots/ReactCommonDebugCxx.api index 2ef9e05072ac..a4bd988886b2 100644 --- a/scripts/cxx-api/api-snapshots/ReactCommonDebugCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactCommonDebugCxx.api @@ -1244,6 +1244,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -2293,6 +2299,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactCommonFrameworksCxx.api b/scripts/cxx-api/api-snapshots/ReactCommonFrameworksCxx.api index 58f5c38aa6a0..b367c0a629bb 100644 --- a/scripts/cxx-api/api-snapshots/ReactCommonFrameworksCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactCommonFrameworksCxx.api @@ -2855,6 +2855,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -5181,6 +5187,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactCommonNewarchCxx.api b/scripts/cxx-api/api-snapshots/ReactCommonNewarchCxx.api index 9279765a5038..1e1e7bdd90df 100644 --- a/scripts/cxx-api/api-snapshots/ReactCommonNewarchCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactCommonNewarchCxx.api @@ -1237,6 +1237,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -2286,6 +2292,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; diff --git a/scripts/cxx-api/api-snapshots/ReactCommonReleaseCxx.api b/scripts/cxx-api/api-snapshots/ReactCommonReleaseCxx.api index 9279765a5038..1e1e7bdd90df 100644 --- a/scripts/cxx-api/api-snapshots/ReactCommonReleaseCxx.api +++ b/scripts/cxx-api/api-snapshots/ReactCommonReleaseCxx.api @@ -1237,6 +1237,12 @@ class facebook::react::YogaStylableProps : public facebook::react::Props { public YogaStylableProps() = default; public YogaStylableProps(const facebook::react::PropsParserContext& context, const facebook::react::YogaStylableProps& sourceProps, const facebook::react::RawProps& rawProps, const std::function& filterObjectKeys = nullptr); public facebook::yoga::Style yogaStyle; + public facebook::yoga::Style::Length borderBlockEndWidth; + public facebook::yoga::Style::Length borderBlockStartWidth; + public facebook::yoga::Style::Length borderBlockWidth; + public facebook::yoga::Style::Length borderInlineEndWidth; + public facebook::yoga::Style::Length borderInlineStartWidth; + public facebook::yoga::Style::Length borderInlineWidth; public facebook::yoga::Style::Length insetBlockEnd; public facebook::yoga::Style::Length insetBlockStart; public facebook::yoga::Style::Length insetInlineEnd; @@ -2286,6 +2292,9 @@ struct facebook::react::CascadedRectangleEdges { public facebook::react::CascadedRectangleEdges::OptionalT bottom; public facebook::react::CascadedRectangleEdges::OptionalT end; public facebook::react::CascadedRectangleEdges::OptionalT horizontal; + public facebook::react::CascadedRectangleEdges::OptionalT inlineEnd; + public facebook::react::CascadedRectangleEdges::OptionalT inlineStart; + public facebook::react::CascadedRectangleEdges::OptionalT inline_; public facebook::react::CascadedRectangleEdges::OptionalT left; public facebook::react::CascadedRectangleEdges::OptionalT right; public facebook::react::CascadedRectangleEdges::OptionalT start; From c33a7dd32377b75cfcb288d6244acc02f382e271 Mon Sep 17 00:00:00 2001 From: Mathieu Acthernoene Date: Fri, 13 Nov 2026 14:13:56 +0100 Subject: [PATCH 2/3] Add an example --- .../js/examples/Border/BorderExample.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js index 6b36f32e4432..350883e06b35 100644 --- a/packages/rn-tester/js/examples/Border/BorderExample.js +++ b/packages/rn-tester/js/examples/Border/BorderExample.js @@ -124,6 +124,23 @@ const styles = StyleSheet.create({ borderRightWidth: 5, borderStyle: 'dashed', }, + borderLogical: { + marginRight: 10, + borderBlockStartWidth: 10, + borderBlockStartColor: 'red', + borderBlockEndWidth: 20, + borderBlockEndColor: 'green', + borderInlineStartWidth: 30, + borderInlineStartColor: 'blue', + borderInlineEndWidth: 40, + borderInlineEndColor: 'yellow', + }, + borderLogicalShorthands: { + borderBlockWidth: 10, + borderBlockColor: 'red', + borderInlineWidth: 20, + borderInlineColor: 'blue', + }, border9: { borderWidth: 10, borderTopLeftRadius: 10, @@ -387,6 +404,22 @@ export default { ); }, }, + { + title: 'Logical Borders', + name: 'logical-borders', + description: 'borderBlock* & borderInline*', + render: function (): React.Node { + return ( + + + + + + ); + }, + }, { title: 'Corner Radii', name: 'corner-radii', From d63628ef7d651e571fe9d5ddb9a74001bbe22636 Mon Sep 17 00:00:00 2001 From: Mathieu Acthernoene Date: Sat, 14 Nov 2026 12:10:44 +0100 Subject: [PATCH 3/3] Add support for props 2.0 --- .../renderer/components/view/HostPlatformViewProps.cpp | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp index 51aeef681f61..22e4ebff747c 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp @@ -185,6 +185,16 @@ static void updateBorderWidthProps( "borderBottomWidth", newBorderWidths.bottom, oldBorderWidths.bottom); + updateBorderWidthPropValue( + result, + "borderBlockWidth", + newBorderWidths.vertical, + oldBorderWidths.vertical); + updateBorderWidthPropValue( + result, + "borderInlineWidth", + newBorderWidths.horizontal, + oldBorderWidths.horizontal); } static void updateBorderRadiusPropValue(