diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js index 7408b96a461..13d8db56a5f 100644 --- a/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -117,6 +117,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { */ backfaceVisibility: true, backgroundColor: colorAttributes, + borderBlockColor: colorAttributes, + borderBlockEndColor: colorAttributes, + borderBlockStartColor: colorAttributes, borderBottomColor: colorAttributes, borderBottomEndRadius: true, borderBottomLeftRadius: true, diff --git a/Libraries/Components/View/ViewNativeComponent.js b/Libraries/Components/View/ViewNativeComponent.js index b60bc0a8d1e..d8052fb9889 100644 --- a/Libraries/Components/View/ViewNativeComponent.js +++ b/Libraries/Components/View/ViewNativeComponent.js @@ -85,6 +85,15 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = borderEndColor: { process: require('../../StyleSheet/processColor').default, }, + borderBlockColor: { + process: require('../../StyleSheet/processColor').default, + }, + borderBlockEndColor: { + process: require('../../StyleSheet/processColor').default, + }, + borderBlockStartColor: { + process: require('../../StyleSheet/processColor').default, + }, focusable: true, overflow: true, diff --git a/Libraries/StyleSheet/StyleSheetTypes.d.ts b/Libraries/StyleSheet/StyleSheetTypes.d.ts index f8ea56ae798..f31224e7a62 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -232,6 +232,9 @@ export interface TransformsStyle { export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { backfaceVisibility?: 'visible' | 'hidden' | undefined; backgroundColor?: ColorValue | undefined; + borderBlockColor?: ColorValue | undefined; + borderBlockEndColor?: ColorValue | undefined; + borderBlockStartColor?: ColorValue | undefined; borderBottomColor?: ColorValue | undefined; borderBottomEndRadius?: number | undefined; borderBottomLeftRadius?: number | undefined; diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js index 44015f2b02b..4fc70eed012 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.js +++ b/Libraries/StyleSheet/StyleSheetTypes.js @@ -698,6 +698,9 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ borderRightColor?: ____ColorValue_Internal, borderStartColor?: ____ColorValue_Internal, borderTopColor?: ____ColorValue_Internal, + borderBlockColor?: ____ColorValue_Internal, + borderBlockEndColor?: ____ColorValue_Internal, + borderBlockStartColor?: ____ColorValue_Internal, borderRadius?: number | AnimatedNode, borderBottomEndRadius?: number | AnimatedNode, borderBottomLeftRadius?: number | AnimatedNode, diff --git a/React/Views/RCTView.h b/React/Views/RCTView.h index adda5c1f016..abb1966a199 100644 --- a/React/Views/RCTView.h +++ b/React/Views/RCTView.h @@ -86,6 +86,9 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; @property (nonatomic, strong) UIColor *borderStartColor; @property (nonatomic, strong) UIColor *borderEndColor; @property (nonatomic, strong) UIColor *borderColor; +@property (nonatomic, strong) UIColor *borderBlockColor; +@property (nonatomic, strong) UIColor *borderBlockEndColor; +@property (nonatomic, strong) UIColor *borderBlockStartColor; /** * Border widths. @@ -97,6 +100,10 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; @property (nonatomic, assign) CGFloat borderStartWidth; @property (nonatomic, assign) CGFloat borderEndWidth; @property (nonatomic, assign) CGFloat borderWidth; +// TODO: Implement logical border width logic +@property (nonatomic, assign) CGFloat borderBlockWidth; +@property (nonatomic, assign) CGFloat borderBlockEndWidth; +@property (nonatomic, assign) CGFloat borderBlockStartWidth; /** * Border curve. diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m index f9a38f31040..7ae86b0fbe1 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -745,6 +745,17 @@ - (RCTBorderColors)borderColorsWithTraitCollection:(UITraitCollection *)traitCol UIColor *borderTopColor = _borderTopColor; UIColor *borderBottomColor = _borderBottomColor; + if(_borderBlockColor){ + borderTopColor = _borderBlockColor; + borderBottomColor = _borderBlockColor; + } + if(_borderBlockEndColor){ + borderBottomColor = _borderBlockEndColor; + } + if(_borderBlockStartColor){ + borderTopColor = _borderBlockStartColor; + } + #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 if (@available(iOS 13.0, *)) { borderColor = [borderColor resolvedColorWithTraitCollection:self.traitCollection]; @@ -924,7 +935,7 @@ -(void)setBorder##side##Color : (UIColor *)color \ } setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom) setBorderColor(Left) - setBorderColor(Start) setBorderColor(End) + setBorderColor(Start) setBorderColor(End) setBorderColor(Block) setBorderColor(BlockEnd) setBorderColor(BlockStart) #pragma mark - Border Width diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index e50b4c19d91..a866b6f7489 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -358,6 +358,9 @@ - (RCTShadowView *)shadowView RCT_VIEW_BORDER_PROPERTY(Left) RCT_VIEW_BORDER_PROPERTY(Start) RCT_VIEW_BORDER_PROPERTY(End) +RCT_VIEW_BORDER_PROPERTY(Block) +RCT_VIEW_BORDER_PROPERTY(BlockEnd) +RCT_VIEW_BORDER_PROPERTY(BlockStart) #define RCT_VIEW_BORDER_RADIUS_PROPERTY(SIDE) \ RCT_CUSTOM_VIEW_PROPERTY(border##SIDE##Radius, CGFloat, RCTView) \ diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java index 36aeb9776da..69a672f3906 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java @@ -47,10 +47,22 @@ public class Spacing { * Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}. */ public static final int ALL = 8; + /** + * Spacing type that represents block directions (top, bottom). E.g. {@code marginBlock}. + */ + public static final int BLOCK = 9; + /** + * Spacing type that represents the block end direction (bottom). E.g. {@code marginBlockEnd}. + */ + public static final int BLOCK_END = 10; + /** + * Spacing type that represents the block start direction (top). E.g. {@code marginBlockStart}. + */ + public static final int BLOCK_START = 11; private static final int[] sFlagsMap = { 1, /*LEFT*/ 2, /*TOP*/ 4, /*RIGHT*/ 8, /*BOTTOM*/ 16, /*START*/ 32, /*END*/ 64, /*HORIZONTAL*/ - 128, /*VERTICAL*/ 256, /*ALL*/ + 128, /*VERTICAL*/ 256, /*ALL*/ 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, /*BLOCK_START*/ }; private final float[] mSpacing; @@ -96,7 +108,8 @@ public boolean set(int spacingType, float value) { mHasAliasesSet = (mValueFlags & sFlagsMap[ALL]) != 0 || (mValueFlags & sFlagsMap[VERTICAL]) != 0 - || (mValueFlags & sFlagsMap[HORIZONTAL]) != 0; + || (mValueFlags & sFlagsMap[HORIZONTAL]) != 0 + || (mValueFlags & sFlagsMap[BLOCK]) != 0; return true; } @@ -111,7 +124,7 @@ public boolean set(int spacingType, float value) { */ public float get(int spacingType) { float defaultValue = - (spacingType == START || spacingType == END ? YogaConstants.UNDEFINED : mDefaultValue); + (spacingType == START || spacingType == END || spacingType == BLOCK || spacingType == BLOCK_END || spacingType == BLOCK_START ? YogaConstants.UNDEFINED : mDefaultValue); if (mValueFlags == 0) { return defaultValue; @@ -174,6 +187,9 @@ private static float[] newFullSpacingArray() { YogaConstants.UNDEFINED, YogaConstants.UNDEFINED, YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, + YogaConstants.UNDEFINED, }; } } diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java index 53cc9783421..3f76fa7dd3d 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java @@ -135,6 +135,9 @@ public class ViewProps { public static final String BORDER_RIGHT_COLOR = "borderRightColor"; public static final String BORDER_TOP_COLOR = "borderTopColor"; public static final String BORDER_BOTTOM_COLOR = "borderBottomColor"; + public static final String BORDER_BLOCK_COLOR = "borderBlockColor"; + public static final String BORDER_BLOCK_END_COLOR = "borderBlockEndColor"; + public static final String BORDER_BLOCK_START_COLOR = "borderBlockStartColor"; public static final String BORDER_TOP_START_RADIUS = "borderTopStartRadius"; public static final String BORDER_TOP_END_RADIUS = "borderTopEndRadius"; public static final String BORDER_BOTTOM_START_RADIUS = "borderBottomStartRadius"; @@ -299,6 +302,15 @@ public static boolean isLayoutOnly(ReadableMap map, String prop) { case BORDER_BOTTOM_COLOR: return map.getType(BORDER_BOTTOM_COLOR) == ReadableType.Number && map.getInt(BORDER_BOTTOM_COLOR) == Color.TRANSPARENT; + case BORDER_BLOCK_COLOR: + return map.getType(BORDER_BLOCK_COLOR) == ReadableType.Number + && map.getInt(BORDER_BLOCK_COLOR) == Color.TRANSPARENT; + case BORDER_BLOCK_END_COLOR: + return map.getType(BORDER_BLOCK_END_COLOR) == ReadableType.Number + && map.getInt(BORDER_BLOCK_END_COLOR) == Color.TRANSPARENT; + case BORDER_BLOCK_START_COLOR: + return map.getType(BORDER_BLOCK_START_COLOR) == ReadableType.Number + && map.getInt(BORDER_BLOCK_START_COLOR) == Color.TRANSPARENT; case BORDER_WIDTH: return map.isNull(BORDER_WIDTH) || map.getDouble(BORDER_WIDTH) == 0d; case BORDER_LEFT_WIDTH: diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt index 100cf1c36d3..a7effcdab17 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt @@ -87,6 +87,9 @@ object ReactMapBufferPropSetter { private const val EDGE_START = 4 private const val EDGE_END = 5 private const val EDGE_ALL = 6 + private const val EDGE_BLOCK = 7 + private const val EDGE_BLOCK_END = 8 + private const val EDGE_BLOCK_START = 9 private const val CORNER_TOP_LEFT = 0 private const val CORNER_TOP_RIGHT = 1 @@ -349,6 +352,9 @@ object ReactMapBufferPropSetter { EDGE_BOTTOM -> 4 EDGE_START -> 5 EDGE_END -> 6 + EDGE_BLOCK -> 7 + EDGE_BLOCK_END -> 8 + EDGE_BLOCK_START -> 9 else -> throw IllegalArgumentException("Unknown key for border color: $key") } val colorValue = entry.intValue diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java index 937abcc20bb..403505942c9 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java @@ -359,6 +359,21 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) { int colorRight = getBorderColor(Spacing.RIGHT); int colorBottom = getBorderColor(Spacing.BOTTOM); + int colorBlock = getBorderColor(Spacing.BLOCK); + int colorBlockStart = getBorderColor(Spacing.BLOCK_START); + int colorBlockEnd = getBorderColor(Spacing.BLOCK_END); + + if(isBorderColorDefined(Spacing.BLOCK)){ + colorBottom = colorBlock; + colorTop = colorBlock; + } + if(isBorderColorDefined(Spacing.BLOCK_END)){ + colorBottom = colorBlockEnd; + } + if(isBorderColorDefined(Spacing.BLOCK_START)){ + colorTop = colorBlockStart; + } + if (borderWidth.top > 0 || borderWidth.bottom > 0 || borderWidth.left > 0 @@ -552,13 +567,20 @@ private void updatePath() { int colorRight = getBorderColor(Spacing.RIGHT); int colorBottom = getBorderColor(Spacing.BOTTOM); int borderColor = getBorderColor(Spacing.ALL); + int colorBlock = getBorderColor(Spacing.BLOCK); + int colorBlockStart = getBorderColor(Spacing.BLOCK_START); + int colorBlockEnd = getBorderColor(Spacing.BLOCK_END); + // Clip border ONLY if its color is non transparent if (Color.alpha(colorLeft) != 0 && Color.alpha(colorTop) != 0 && Color.alpha(colorRight) != 0 && Color.alpha(colorBottom) != 0 - && Color.alpha(borderColor) != 0) { + && Color.alpha(borderColor) != 0 + && Color.alpha(colorBlock) != 0 + && Color.alpha(colorBlockStart) != 0 + && Color.alpha(colorBlockEnd) != 0) { mInnerClipTempRectForBorderRadius.top += borderWidth.top; mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom; @@ -1128,6 +1150,21 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) { int colorRight = getBorderColor(Spacing.RIGHT); int colorBottom = getBorderColor(Spacing.BOTTOM); + int colorBlock = getBorderColor(Spacing.BLOCK); + int colorBlockStart = getBorderColor(Spacing.BLOCK_START); + int colorBlockEnd = getBorderColor(Spacing.BLOCK_END); + + if(isBorderColorDefined(Spacing.BLOCK)){ + colorBottom = colorBlock; + colorTop = colorBlock; + } + if(isBorderColorDefined(Spacing.BLOCK_END)){ + colorBottom = colorBlockEnd; + } + if(isBorderColorDefined(Spacing.BLOCK_START)){ + colorTop = colorBlockStart; + } + final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL; int colorStart = getBorderColor(Spacing.START); int colorEnd = getBorderColor(Spacing.END); diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java index 91cbdf7c3b7..4bd81d72153 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java @@ -47,6 +47,9 @@ public class ReactViewManager extends ReactClippingViewManager { Spacing.BOTTOM, Spacing.START, Spacing.END, + Spacing.BLOCK, + Spacing.BLOCK_END, + Spacing.BLOCK_START }; private static final int CMD_HOTSPOT_UPDATE = 1; private static final int CMD_SET_PRESSED = 2; @@ -238,7 +241,10 @@ public void setBorderWidth(ReactViewGroup view, int index, float width) { ViewProps.BORDER_TOP_COLOR, ViewProps.BORDER_BOTTOM_COLOR, ViewProps.BORDER_START_COLOR, - ViewProps.BORDER_END_COLOR + ViewProps.BORDER_END_COLOR, + ViewProps.BORDER_BLOCK_COLOR, + ViewProps.BORDER_BLOCK_END_COLOR, + ViewProps.BORDER_BLOCK_START_COLOR }, customType = "Color") public void setBorderColor(ReactViewGroup view, int index, Integer color) { diff --git a/ReactCommon/react/renderer/components/view/primitives.h b/ReactCommon/react/renderer/components/view/primitives.h index 34ea20376f1..ec8a276d307 100644 --- a/ReactCommon/react/renderer/components/view/primitives.h +++ b/ReactCommon/react/renderer/components/view/primitives.h @@ -99,6 +99,9 @@ struct CascadedRectangleEdges { OptionalT horizontal{}; OptionalT vertical{}; OptionalT all{}; + OptionalT block{}; + OptionalT blockStart{}; + OptionalT blockEnd{}; Counterpart resolve(bool isRTL, T defaults) const { const auto leadingEdge = isRTL ? end : start; @@ -111,10 +114,14 @@ struct CascadedRectangleEdges { return { /* .left = */ left.value_or(leadingEdge.value_or(horizontalOrAllOrDefault)), - /* .top = */ top.value_or(verticalOrAllOrDefault), + /* .top = */ + blockStart.value_or( + block.value_or(top.value_or(verticalOrAllOrDefault))), /* .right = */ right.value_or(trailingEdge.value_or(horizontalOrAllOrDefault)), - /* .bottom = */ bottom.value_or(verticalOrAllOrDefault), + /* .bottom = */ + blockEnd.value_or( + block.value_or(bottom.value_or(verticalOrAllOrDefault))), }; } @@ -128,7 +135,10 @@ struct CascadedRectangleEdges { this->end, this->horizontal, this->vertical, - this->all) == + this->all, + this->block, + this->blockStart, + this->blockEnd) == std::tie( rhs.left, rhs.top, @@ -138,7 +148,10 @@ struct CascadedRectangleEdges { rhs.end, rhs.horizontal, rhs.vertical, - rhs.all); + rhs.all, + rhs.block, + rhs.blockStart, + rhs.blockEnd); } bool operator!=(const CascadedRectangleEdges &rhs) const { diff --git a/ReactCommon/react/renderer/components/view/propsConversions.h b/ReactCommon/react/renderer/components/view/propsConversions.h index 97fa6b6d7ee..ad7cc2f3a34 100644 --- a/ReactCommon/react/renderer/components/view/propsConversions.h +++ b/ReactCommon/react/renderer/components/view/propsConversions.h @@ -515,6 +515,30 @@ static inline CascadedRectangleEdges convertRawProp( defaultValue.vertical, prefix, suffix); + result.block = convertRawProp( + context, + rawProps, + "Block", + sourceValue.block, + defaultValue.block, + prefix, + suffix); + result.blockEnd = convertRawProp( + context, + rawProps, + "BlockEnd", + sourceValue.blockEnd, + defaultValue.blockEnd, + prefix, + suffix); + result.blockStart = convertRawProp( + context, + rawProps, + "BlockStart", + sourceValue.blockStart, + defaultValue.blockStart, + prefix, + suffix); result.all = convertRawProp( context, rawProps, "", sourceValue.all, defaultValue.all, prefix, suffix); diff --git a/ReactCommon/react/renderer/components/view/viewPropConversions.h b/ReactCommon/react/renderer/components/view/viewPropConversions.h index fe253277752..64a0469a9f7 100644 --- a/ReactCommon/react/renderer/components/view/viewPropConversions.h +++ b/ReactCommon/react/renderer/components/view/viewPropConversions.h @@ -28,6 +28,9 @@ constexpr MapBuffer::Key EDGE_BOTTOM = 3; constexpr MapBuffer::Key EDGE_START = 4; constexpr MapBuffer::Key EDGE_END = 5; constexpr MapBuffer::Key EDGE_ALL = 6; +constexpr MapBuffer::Key EDGE_BLOCK = 7; +constexpr MapBuffer::Key EDGE_BLOCK_START = 8; +constexpr MapBuffer::Key EDGE_BLOCK_END = 9; constexpr MapBuffer::Key CORNER_TOP_LEFT = 0; constexpr MapBuffer::Key CORNER_TOP_RIGHT = 1; @@ -107,13 +110,17 @@ inline MapBuffer convertBorderColors(CascadedBorderColors const &colors) { template MapBuffer convertCascadedEdges(CascadedRectangleEdges const &edges) { - MapBufferBuilder builder(7); + MapBufferBuilder builder(10); putOptionalFloat(builder, EDGE_TOP, optionalFromValue(edges.top)); putOptionalFloat(builder, EDGE_RIGHT, optionalFromValue(edges.right)); putOptionalFloat(builder, EDGE_BOTTOM, optionalFromValue(edges.bottom)); putOptionalFloat(builder, EDGE_LEFT, optionalFromValue(edges.left)); putOptionalFloat(builder, EDGE_START, optionalFromValue(edges.start)); putOptionalFloat(builder, EDGE_END, optionalFromValue(edges.end)); + putOptionalFloat(builder, EDGE_BLOCK, optionalFromValue(edges.block)); + putOptionalFloat(builder, EDGE_BLOCK_END, optionalFromValue(edges.blockEnd)); + putOptionalFloat( + builder, EDGE_BLOCK_START, optionalFromValue(edges.blockStart)); putOptionalFloat(builder, EDGE_ALL, optionalFromValue(edges.all)); return builder.build(); } diff --git a/ReactCommon/react/renderer/core/PropsMacros.h b/ReactCommon/react/renderer/core/PropsMacros.h index 2aa75fd4e42..40c9c8a13cc 100644 --- a/ReactCommon/react/renderer/core/PropsMacros.h +++ b/ReactCommon/react/renderer/core/PropsMacros.h @@ -19,7 +19,7 @@ // Get hash at compile-time. sizeof(str) - 1 == strlen #define CONSTEXPR_RAW_PROPS_KEY_HASH(s) \ - ([]() constexpr->RawPropsPropNameHash { \ + ([]() constexpr -> RawPropsPropNameHash { \ CLANG_PRAGMA("clang diagnostic push") \ CLANG_PRAGMA("clang diagnostic ignored \"-Wshadow\"") \ return folly::hash::fnv32_buf(s, sizeof(s) - 1); \ @@ -99,7 +99,13 @@ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ struct, vertical, prefix "Vertical" suffix, rawValue) \ CASE_STATEMENT_SET_FIELD_VALUE_INDEXED( \ - struct, all, prefix "" suffix, rawValue) + 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) // Rebuild a type that contains multiple fields from a single field value #define REBUILD_FIELD_SWITCH_CASE( \ diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js index de2e04acc1a..8602101cf52 100644 --- a/packages/rn-tester/js/examples/View/ViewExample.js +++ b/packages/rn-tester/js/examples/View/ViewExample.js @@ -738,4 +738,43 @@ exports.examples = [ ); }, }, + { + title: 'Logical Border Color', + render(): React.Node { + return ( + + + + borderBlockColor orange + + + + + borderBlockStartColor purple + borderBlockEndColor green + + + + ); + }, + }, ];