From b243d343fa741de94537d8535f76714ff2985101 Mon Sep 17 00:00:00 2001
From: shubhamguptadream11 <shubham.gupta@dream11.com>
Date: Tue, 16 Jul 2024 04:39:21 -0700
Subject: [PATCH] fix: background color fix when border is dotted and dashed
 (#45430)

Summary:
This PR fixes these issues: https://github.com/facebook/react-native/issues/42289, https://github.com/facebook/react-native/issues/45368

## Changelog:

[IOS] [FIXED] - Message

In iOS for old/new architecture when we are trying to pass borderStyle other than 'solid' then in this
**Old Arch file**
https://github.com/facebook/react-native/blob/2eb7bcb8d9c0f239a13897e3a5d4397d81d3f627/packages/react-native/React/Views/RCTView.m#L807
**New Arch file**
https://github.com/facebook/react-native/blob/2eb7bcb8d9c0f239a13897e3a5d4397d81d3f627/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L652
 file useCoreAnimationBorderRendering is coming as nil since borderStyle passed is not **solid**. Due to which else case block executes and there we are applying backgroundColor as nil.

I just removed that hardcoded check for sold style and make sured that it is now working now with all three borderStyle 'dotted' | 'solid' | 'dashed' for Text and View both

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: https://github.com/facebook/react-native/pull/45430

Test Plan:
Tested with possible borderStyle values.

Providing the fixed screenshot here.

![simulator_screenshot_5E7DDDE7-71F2-4A35-93B3-BFD9F980EA18](https://github.com/user-attachments/assets/3949085e-946f-4669-aaf5-fe366f7e6fc4)

Reviewed By: cortinico

Differential Revision: D59755124

Pulled By: cipolleschi

fbshipit-source-id: 091bb9ba731ac93973230970b526396fd6ea2989
---
 .../Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm | 1 -
 packages/react-native/React/Views/RCTView.m                     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
index 4faaa925c12..93340509beb 100644
--- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
+++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
@@ -655,7 +655,6 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
   const bool useCoreAnimationBorderRendering =
       borderMetrics.borderColors.isUniform() && borderMetrics.borderWidths.isUniform() &&
       borderMetrics.borderStyles.isUniform() && borderMetrics.borderRadii.isUniform() &&
-      borderMetrics.borderStyles.left == BorderStyle::Solid &&
       (
           // iOS draws borders in front of the content whereas CSS draws them behind
           // the content. For this reason, only use iOS border drawing when clipping
diff --git a/packages/react-native/React/Views/RCTView.m b/packages/react-native/React/Views/RCTView.m
index 3a865810033..7b6f5e7a6d4 100644
--- a/packages/react-native/React/Views/RCTView.m
+++ b/packages/react-native/React/Views/RCTView.m
@@ -804,7 +804,7 @@ static CGFloat RCTDefaultIfNegativeTo(CGFloat defaultValue, CGFloat x)
   const RCTBorderColors borderColors = [self borderColorsWithTraitCollection:self.traitCollection];
 
   BOOL useIOSBorderRendering = RCTCornerRadiiAreEqual(cornerRadii) && RCTBorderInsetsAreEqual(borderInsets) &&
-      RCTBorderColorsAreEqual(borderColors) && _borderStyle == RCTBorderStyleSolid &&
+      RCTBorderColorsAreEqual(borderColors) &&
 
       // iOS draws borders in front of the content whereas CSS draws them behind
       // the content. For this reason, only use iOS border drawing when clipping