Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix border drawn over children on iOS (#44777)

Browse Source 
Summary:
Fixes https://github.com/facebook/react-native/issues/44690

In the code responsible for drawing border on iOS there's a comment saying:
> 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 or when the border is hidden.

The condition that follows checks whether the content is clipped and the width and alpha channel of the border: https://github.com/facebook/react-native/blob/e0a2e86d0346bd7e40adf69311daa538ca8c9c5f/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L643-L644.

The problem is when the color is not set at all - `colorComponentsFromColor(borderMetrics.borderColors.left).alpha` will be equal to 0 since the relevant `SharedColor` is `null`: https://github.com/facebook/react-native/blob/e0a2e86d0346bd7e40adf69311daa538ca8c9c5f/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm#L76-L86

Then it uses the path with the default iOS behavior (drawing the border on top of the content) instead of the custom one (with the border below) and it seems like it defaults to drawing black when the passed color is `nil`.

This PR simply adds one more check to make sure the color is actually set before choosing the default platform behavior.

## Changelog:

[IOS] [FIXED] - Fixed border being drawn over children when no color was set

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

Test Plan:
Tested on the code from the issue.

|Before|After|
|-|-|
|<img width="546" alt="Screenshot 2024-06-04 at 11 18 14" src="https://github.com/facebook/react-native/assets/21055725/f13250a9-2e99-41c5-a9bc-02d65c00a6c0">|<img width="546" alt="Screenshot 2024-06-04 at 11 17 38" src="https://github.com/facebook/react-native/assets/21055725/f4571a5f-dfc4-4191-854c-fd3faf698b29">|

Reviewed By: cortinico

Differential Revision: D58131337

Pulled By: cipolleschi

fbshipit-source-id: 7da247d81ecec586de6f0023e0cb399f9966213d
This commit is contained in:
Jakub Piasecki
2024-06-04 05:57:33 -07:00
committed by Thibault Malbranche
parent 9a5faac12b
commit a2b52af3bc
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
+3 -2
View File
@@ -633,8 +633,9 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
// 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
// or when the border is hidden.
borderMetrics.borderWidths.left == 0 ||
colorComponentsFromColor(borderMetrics.borderColors.left).alpha == 0 || self.clipsToBounds);
borderMetrics.borderWidths.left == 0 || self.clipsToBounds ||
(colorComponentsFromColor(borderMetrics.borderColors.left).alpha == 0 &&
(*borderMetrics.borderColors.left).getUIColor() != nullptr));
CGColorRef backgroundColor = [_backgroundColor resolvedColorWithTraitCollection:self.traitCollection].CGColor;