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
This commit is contained in:
shubhamguptadream11
2024-07-16 04:39:21 -07:00
committed by Facebook GitHub Bot
parent e02ca334b1
commit b243d343fa
2 changed files with 1 additions and 2 deletions
@@ -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
+1 -1
View File
@@ -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