Skip to content

Add logical border width and inline border color props #59996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zoontek wants to merge 2 commits into
base: main
Choose a base branch
from
+556 −114
Open

Add logical border width and inline border color props #59996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3c1526
Add logical border width and inline border color props
zoontek Nov 13, 2026
c33a7dd
Add an example
zoontek Nov 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
9 changes: 9 additions & 0 deletions packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -399,6 +405,9 @@ const validAttributesForNonEventProps = {
borderBlockColor: colorAttribute,
borderBlockEndColor: colorAttribute,
borderBlockStartColor: colorAttribute,
borderInlineColor: colorAttribute,
borderInlineEndColor: colorAttribute,
borderInlineStartColor: colorAttribute,
focusable: true,
tabIndex: true,
backfaceVisibility: true,
Expand Down
6 changes: 6 additions & 0 deletions packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
45 changes: 45 additions & 0 deletions packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
15 changes: 15 additions & 0 deletions packages/react-native/ReactAndroid/api/ReactAndroid.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
20 changes: 19 additions & 1 deletion packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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*/
Expand All @@ -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 {
Expand All @@ -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,
)
}
}
Expand Down
9 changes: 9 additions & 0 deletions packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
24 changes: 18 additions & 6 deletions ...eact-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderColors.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down
Loading
Loading