Feat/add logic border color

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -119,7 +119,16 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   backgroundColor: colorAttributes,
   borderBlockColor: colorAttributes,
   borderBlockEndColor: colorAttributes,
+  borderBlockEndStyle: true,
   borderBlockStartColor: colorAttributes,
+  borderBlockStartStyle: true,
+  borderBlockStyle: true,
+  borderInlineColor: colorAttributes,
+  borderInlineStyle: true,
+  borderInlineEndColor: colorAttributes,
+  borderInlineEndStyle: true,
+  borderInlineStartStyle: true,
+  borderInlineStartColor: colorAttributes,
   borderBottomColor: colorAttributes,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,

Libraries/Components/View/ViewNativeComponent.js

@@ -50,6 +50,13 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderStartEndRadius: true,
           borderStartStartRadius: true,
           borderStyle: true,
+          borderBlockEndStyle: true,
+          borderBlockStartStyle: true,
+          borderBlockStyle: true,
+          borderInlineStyle: true,
+          borderInlineEndStyle: true,
+          borderInlineStartStyle: true,
+
           hitSlop: true,
           pointerEvents: true,
           nativeBackgroundAndroid: true,
@@ -94,6 +101,15 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderBlockStartColor: {
             process: require('../../StyleSheet/processColor').default,
           },
+          borderInlineColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderInlineEndColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderInlineStartColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
 
           focusable: true,
           overflow: true,

Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -235,6 +235,9 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   borderBlockColor?: ColorValue | undefined;
   borderBlockEndColor?: ColorValue | undefined;
   borderBlockStartColor?: ColorValue | undefined;
+  borderInlineColor?: ColorValue | undefined;
+  borderInlineEndColor?: ColorValue | undefined;
+  borderInlineStartColor?: ColorValue | undefined;
   borderBottomColor?: ColorValue | undefined;
   borderBottomEndRadius?: number | undefined;
   borderBottomLeftRadius?: number | undefined;

Libraries/StyleSheet/StyleSheetTypes.js

@@ -701,6 +701,9 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderBlockColor?: ____ColorValue_Internal,
   borderBlockEndColor?: ____ColorValue_Internal,
   borderBlockStartColor?: ____ColorValue_Internal,
+  borderInlineColor?: ____ColorValue_Internal,
+  borderInlineEndColor?: ____ColorValue_Internal,
+  borderInlineStartColor?: ____ColorValue_Internal,
   borderRadius?: number | AnimatedNode,
   borderBottomEndRadius?: number | AnimatedNode,
   borderBottomLeftRadius?: number | AnimatedNode,

React/Views/RCTView.h

@@ -89,6 +89,9 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 @property (nonatomic, strong) UIColor *borderBlockColor;
 @property (nonatomic, strong) UIColor *borderBlockEndColor;
 @property (nonatomic, strong) UIColor *borderBlockStartColor;
+@property (nonatomic, strong) UIColor *borderInlineColor;
+@property (nonatomic, strong) UIColor *borderInlineEndColor;
+@property (nonatomic, strong) UIColor *borderInlineStartColor;
 
 /**
  * Border widths.
@@ -104,6 +107,9 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 @property (nonatomic, assign) CGFloat borderBlockWidth;
 @property (nonatomic, assign) CGFloat borderBlockEndWidth;
 @property (nonatomic, assign) CGFloat borderBlockStartWidth;
+@property (nonatomic, assign) CGFloat borderInlineWidth;
+@property (nonatomic, assign) CGFloat borderInlineEndWidth;
+@property (nonatomic, assign) CGFloat borderInlineStartWidth;
 
 /**
  * Border curve.

React/Views/RCTView.m

@@ -731,14 +731,17 @@ - (RCTBorderColors)borderColorsWithTraitCollection:(UITraitCollection *)traitCol
   UIColor *directionAwareBorderRightColor = nil;
 
   if ([[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) {
-    UIColor *borderStartColor = _borderStartColor ?: _borderLeftColor;
-    UIColor *borderEndColor = _borderEndColor ?: _borderRightColor;
+    UIColor *borderStartColor = _borderInlineStartColor ?: _borderInlineColor ?: _borderStartColor ?: _borderLeftColor;
+    UIColor *borderEndColor = _borderInlineEndColor ?: _borderInlineColor ?: _borderEndColor ?: _borderRightColor;
 
     directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor;
     directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor;
   } else {
-    directionAwareBorderLeftColor = (isRTL ? _borderEndColor : _borderStartColor) ?: _borderLeftColor;
-    directionAwareBorderRightColor = (isRTL ? _borderStartColor : _borderEndColor) ?: _borderRightColor;
+    UIColor *borderStartColor = _borderInlineStartColor ?: _borderInlineColor ?: _borderStartColor;
+    UIColor *borderEndColor = _borderInlineEndColor ?: _borderInlineColor ?: _borderEndColor;
+
+    directionAwareBorderLeftColor = (isRTL ? borderEndColor : borderStartColor) ?: _borderLeftColor;
+    directionAwareBorderRightColor = (isRTL ? borderStartColor : borderEndColor) ?: _borderRightColor;
   }
 
   UIColor *borderColor = _borderColor;
@@ -936,6 +939,7 @@ -(void)setBorder##side##Color : (UIColor *)color \
 
 setBorderColor() setBorderColor(Top) setBorderColor(Right) setBorderColor(Bottom) setBorderColor(Left)
     setBorderColor(Start) setBorderColor(End) setBorderColor(Block) setBorderColor(BlockEnd) setBorderColor(BlockStart)
+    setBorderColor(Inline) setBorderColor(InlineEnd) setBorderColor(InlineStart)
 
 #pragma mark - Border Width
 

React/Views/RCTViewManager.m

@@ -361,6 +361,9 @@ - (RCTShadowView *)shadowView
 RCT_VIEW_BORDER_PROPERTY(Block)
 RCT_VIEW_BORDER_PROPERTY(BlockEnd)
 RCT_VIEW_BORDER_PROPERTY(BlockStart)
+RCT_VIEW_BORDER_PROPERTY(Inline)
+RCT_VIEW_BORDER_PROPERTY(InlineEnd)
+RCT_VIEW_BORDER_PROPERTY(InlineStart)
 
 #define RCT_VIEW_BORDER_RADIUS_PROPERTY(SIDE)                                                          \
   RCT_CUSTOM_VIEW_PROPERTY(border##SIDE##Radius, CGFloat, RCTView)                                     \

ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java

@@ -55,10 +55,23 @@ public class Spacing {
    * Spacing type that represents the block start direction (top). E.g. {@code marginBlockStart}.
    */
   public static final int BLOCK_START = 11;
+  /** Spacing type that represents inline directions (left, right). E.g. {@code marginInline}. */
+  public static final int INLINE = 12;
+  /**
+   * Spacing type that represents the inline end direction (right in left-to-right, left in
+   * right-to-left). E.g. {@code marginInlineEnd}.
+   */
+  public static final int INLINE_END = 13;
+  /**
+   * Spacing type that represents the inline start direction (left in left-to-right, right in
+   * right-to-left). E.g. {@code marginInlineStart}.
+   */
+  public static final int INLINE_START = 14;
 
   private static final int[] sFlagsMap = {
     1, /*LEFT*/ 2, /*TOP*/ 4, /*RIGHT*/ 8, /*BOTTOM*/ 16, /*START*/ 32, /*END*/ 64, /*HORIZONTAL*/
     128, /*VERTICAL*/ 256, /*ALL*/ 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, /*BLOCK_START*/
+    4096, /*INLINE*/ 8192, /*INLINE_END*/ 16384, /*INLINE_START*/
   };
 
   private final float[] mSpacing;
@@ -105,7 +118,8 @@ public boolean set(int spacingType, float value) {
           (mValueFlags & sFlagsMap[ALL]) != 0
               || (mValueFlags & sFlagsMap[VERTICAL]) != 0
               || (mValueFlags & sFlagsMap[HORIZONTAL]) != 0
-              || (mValueFlags & sFlagsMap[BLOCK]) != 0;
+              || (mValueFlags & sFlagsMap[BLOCK]) != 0
+              || (mValueFlags & sFlagsMap[INLINE]) != 0;
 
       return true;
     }
@@ -125,6 +139,9 @@ public float get(int spacingType) {
                 || spacingType == BLOCK
                 || spacingType == BLOCK_END
                 || spacingType == BLOCK_START
+                || spacingType == INLINE
+                || spacingType == INLINE_END
+                || spacingType == INLINE_START
             ? YogaConstants.UNDEFINED
             : mDefaultValue);
 
@@ -192,6 +209,9 @@ private static float[] newFullSpacingArray() {
       YogaConstants.UNDEFINED,
       YogaConstants.UNDEFINED,
       YogaConstants.UNDEFINED,
+      YogaConstants.UNDEFINED,
+      YogaConstants.UNDEFINED,
+      YogaConstants.UNDEFINED,
     };
   }
 }

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -138,6 +138,9 @@ public class ViewProps {
   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_INLINE_COLOR = "borderInlineColor";
+  public static final String BORDER_INLINE_END_COLOR = "borderInlineEndColor";
+  public static final String BORDER_INLINE_START_COLOR = "borderInlineStartColor";
   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";
@@ -311,6 +314,15 @@ public static boolean isLayoutOnly(ReadableMap map, String prop) {
       case BORDER_BLOCK_START_COLOR:
         return map.getType(BORDER_BLOCK_START_COLOR) == ReadableType.Number
             && map.getInt(BORDER_BLOCK_START_COLOR) == Color.TRANSPARENT;
+      case BORDER_INLINE_COLOR:
+        return map.getType(BORDER_INLINE_COLOR) == ReadableType.Number
+            && map.getInt(BORDER_INLINE_COLOR) == Color.TRANSPARENT;
+      case BORDER_INLINE_END_COLOR:
+        return map.getType(BORDER_INLINE_END_COLOR) == ReadableType.Number
+            && map.getInt(BORDER_INLINE_END_COLOR) == Color.TRANSPARENT;
+      case BORDER_INLINE_START_COLOR:
+        return map.getType(BORDER_INLINE_START_COLOR) == ReadableType.Number
+            && map.getInt(BORDER_INLINE_START_COLOR) == Color.TRANSPARENT;
       case BORDER_WIDTH:
         return map.isNull(BORDER_WIDTH) || map.getDouble(BORDER_WIDTH) == 0d;
       case BORDER_LEFT_WIDTH:

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt

@@ -90,6 +90,9 @@ object ReactMapBufferPropSetter {
   private const val EDGE_BLOCK = 7
   private const val EDGE_BLOCK_END = 8
   private const val EDGE_BLOCK_START = 9
+  private const val EDGE_INLINE = 10
+  private const val EDGE_INLINE_END = 11
+  private const val EDGE_INLINE_START = 12
 
   private const val CORNER_TOP_LEFT = 0
   private const val CORNER_TOP_RIGHT = 1
@@ -355,6 +358,9 @@ object ReactMapBufferPropSetter {
             EDGE_BLOCK -> 7
             EDGE_BLOCK_END -> 8
             EDGE_BLOCK_START -> 9
+            EDGE_INLINE -> 10
+            EDGE_INLINE_END -> 11
+            EDGE_INLINE_START -> 12
             else -> throw IllegalArgumentException("Unknown key for border color: $key")
           }
       val colorValue = entry.intValue

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java

@@ -408,6 +408,13 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
         int colorStart = getBorderColor(Spacing.START);
         int colorEnd = getBorderColor(Spacing.END);
 
+        final boolean isColorStartDefined = isBorderColorDefined(Spacing.START);
+        final boolean isColorEndDefined = isBorderColorDefined(Spacing.END);
+        final boolean isDirectionAwareColorLeftDefined =
+            isRTL ? isColorEndDefined : isColorStartDefined;
+        final boolean isDirectionAwareColorRightDefined =
+            isRTL ? isColorStartDefined : isColorEndDefined;
+
         if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(mContext)) {
           if (!isBorderColorDefined(Spacing.START)) {
             colorStart = colorLeft;
@@ -426,13 +433,6 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
           final int directionAwareColorLeft = isRTL ? colorEnd : colorStart;
           final int directionAwareColorRight = isRTL ? colorStart : colorEnd;
 
-          final boolean isColorStartDefined = isBorderColorDefined(Spacing.START);
-          final boolean isColorEndDefined = isBorderColorDefined(Spacing.END);
-          final boolean isDirectionAwareColorLeftDefined =
-              isRTL ? isColorEndDefined : isColorStartDefined;
-          final boolean isDirectionAwareColorRightDefined =
-              isRTL ? isColorStartDefined : isColorEndDefined;
-
           if (isDirectionAwareColorLeftDefined) {
             colorLeft = directionAwareColorLeft;
           }
@@ -442,6 +442,35 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
           }
         }
 
+        // colorInlineStart and colorInlineEnd  have precedence over colorEnd and colorStart values
+        int colorInline = getBorderColor(Spacing.INLINE);
+        int colorInlineStart = getBorderColor(Spacing.INLINE_START);
+        int colorInlineEnd = getBorderColor(Spacing.INLINE_END);
+        final int directionAwareInlineColorLeft = isRTL ? colorInlineEnd : colorInlineStart;
+        final int directionAwareInlineColorRight = isRTL ? colorInlineStart : colorInlineEnd;
+
+        final boolean isColorInlineDefined = isBorderColorDefined(Spacing.INLINE);
+        final boolean isColorInlineStartDefined = isBorderColorDefined(Spacing.INLINE_START);
+        final boolean isColorInlineEndDefined = isBorderColorDefined(Spacing.INLINE_END);
+
+        final boolean isDirectionAwareColorInlineLeftDefined =
+              isRTL ? isColorInlineEndDefined : isColorInlineStartDefined;
+        final boolean isDirectionAwareColorInlineRightDefined =
+            isRTL ? isColorInlineStartDefined : isColorInlineEndDefined;
+
+        if(isDirectionAwareColorInlineLeftDefined){
+          colorLeft = directionAwareInlineColorLeft;
+        }else if(!isDirectionAwareColorLeftDefined && isColorInlineDefined){
+          colorLeft = colorInline;
+        }
+
+        if(isDirectionAwareColorInlineRightDefined){
+          colorRight = directionAwareInlineColorRight;
+        }else if(!isDirectionAwareColorRightDefined && isColorInlineDefined){
+          colorRight = colorInline;
+        }
+
+
         final float left = mOuterClipTempRectForBorderRadius.left;
         final float right = mOuterClipTempRectForBorderRadius.right;
         final float top = mOuterClipTempRectForBorderRadius.top;
@@ -570,6 +599,9 @@ private void updatePath() {
     int colorBlock = getBorderColor(Spacing.BLOCK);
     int colorBlockStart = getBorderColor(Spacing.BLOCK_START);
     int colorBlockEnd = getBorderColor(Spacing.BLOCK_END);
+    int colorInline = getBorderColor(Spacing.INLINE);
+    int colorInlineStart = getBorderColor(Spacing.INLINE_START);
+    int colorInlineEnd = getBorderColor(Spacing.INLINE_END);
 
     // Clip border ONLY if its color is non transparent
     if (Color.alpha(colorLeft) != 0
@@ -579,7 +611,10 @@ private void updatePath() {
         && Color.alpha(borderColor) != 0
         && Color.alpha(colorBlock) != 0
         && Color.alpha(colorBlockStart) != 0
-        && Color.alpha(colorBlockEnd) != 0) {
+        && Color.alpha(colorBlockEnd) != 0
+        && Color.alpha(colorInline) != 0
+        && Color.alpha(colorInlineStart) != 0
+        && Color.alpha(colorInlineEnd) != 0) {
 
       mInnerClipTempRectForBorderRadius.top += borderWidth.top;
       mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom;
@@ -1168,6 +1203,13 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
       int colorStart = getBorderColor(Spacing.START);
       int colorEnd = getBorderColor(Spacing.END);
 
+      final boolean isColorStartDefined = isBorderColorDefined(Spacing.START);
+      final boolean isColorEndDefined = isBorderColorDefined(Spacing.END);
+      final boolean isDirectionAwareColorLeftDefined =
+          isRTL ? isColorEndDefined : isColorStartDefined;
+      final boolean isDirectionAwareColorRightDefined =
+          isRTL ? isColorStartDefined : isColorEndDefined;
+
       if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(mContext)) {
         if (!isBorderColorDefined(Spacing.START)) {
           colorStart = colorLeft;
@@ -1186,13 +1228,6 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
         final int directionAwareColorLeft = isRTL ? colorEnd : colorStart;
         final int directionAwareColorRight = isRTL ? colorStart : colorEnd;
 
-        final boolean isColorStartDefined = isBorderColorDefined(Spacing.START);
-        final boolean isColorEndDefined = isBorderColorDefined(Spacing.END);
-        final boolean isDirectionAwareColorLeftDefined =
-            isRTL ? isColorEndDefined : isColorStartDefined;
-        final boolean isDirectionAwareColorRightDefined =
-            isRTL ? isColorStartDefined : isColorEndDefined;
-
         if (isDirectionAwareColorLeftDefined) {
           colorLeft = directionAwareColorLeft;
         }
@@ -1202,6 +1237,34 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
         }
       }
 
+      // colorInlineStart and colorInlineEnd  have precedence over colorEnd and colorStart values
+      int colorInline = getBorderColor(Spacing.INLINE);
+      int colorInlineStart = getBorderColor(Spacing.INLINE_START);
+      int colorInlineEnd = getBorderColor(Spacing.INLINE_END);
+      final int directionAwareInlineColorLeft = isRTL ? colorInlineEnd : colorInlineStart;
+      final int directionAwareInlineColorRight = isRTL ? colorInlineStart : colorInlineEnd;
+
+      final boolean isColorInlineDefined = isBorderColorDefined(Spacing.INLINE);
+      final boolean isColorInlineStartDefined = isBorderColorDefined(Spacing.INLINE_START);
+      final boolean isColorInlineEndDefined = isBorderColorDefined(Spacing.INLINE_END);
+
+      final boolean isDirectionAwareColorInlineLeftDefined =
+                isRTL ? isColorInlineEndDefined : isColorInlineStartDefined;
+      final boolean isDirectionAwareColorInlineRightDefined =
+          isRTL ? isColorInlineStartDefined : isColorInlineEndDefined;
+
+      if(isDirectionAwareColorInlineLeftDefined){
+        colorLeft = directionAwareInlineColorLeft;
+      }else if(!isDirectionAwareColorLeftDefined && isColorInlineDefined){
+        colorLeft = colorInline;
+      }
+
+      if(isDirectionAwareColorInlineRightDefined){
+        colorRight = directionAwareInlineColorRight;
+      }else if(!isDirectionAwareColorRightDefined && isColorInlineDefined){
+        colorRight = colorInline;
+      }
+
       int left = bounds.left;
       int top = bounds.top;
 

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java

@@ -49,7 +49,10 @@ public class ReactViewManager extends ReactClippingViewManager<ReactViewGroup> {
     Spacing.END,
     Spacing.BLOCK,
     Spacing.BLOCK_END,
-    Spacing.BLOCK_START
+    Spacing.BLOCK_START,
+    Spacing.INLINE,
+    Spacing.INLINE_END,
+    Spacing.INLINE_START
   };
   private static final int CMD_HOTSPOT_UPDATE = 1;
   private static final int CMD_SET_PRESSED = 2;
@@ -244,7 +247,10 @@ public void setBorderWidth(ReactViewGroup view, int index, float width) {
         ViewProps.BORDER_END_COLOR,
         ViewProps.BORDER_BLOCK_COLOR,
         ViewProps.BORDER_BLOCK_END_COLOR,
-        ViewProps.BORDER_BLOCK_START_COLOR
+        ViewProps.BORDER_BLOCK_START_COLOR,
+        ViewProps.BORDER_INLINE_COLOR,
+        ViewProps.BORDER_INLINE_END_COLOR,
+        ViewProps.BORDER_INLINE_START_COLOR
       },
       customType = "Color")
   public void setBorderColor(ReactViewGroup view, int index, Integer color) {