Skip to content

Commit 54656dd

Browse files
j-piaseckikosmydel
authored andcommitted
Fix border drawn over children on iOS (facebook#44777)
Summary: Fixes facebook#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: facebook#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
1 parent f521c0a commit 54656dd

1 file changed

Lines changed: 3 additions & 2 deletions

File tree

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -640,8 +640,9 @@ - (void)invalidateLayer
640640
// iOS draws borders in front of the content whereas CSS draws them behind
641641
// the content. For this reason, only use iOS border drawing when clipping
642642
// or when the border is hidden.
643-
borderMetrics.borderWidths.left == 0 ||
644-
colorComponentsFromColor(borderMetrics.borderColors.left).alpha == 0 || self.clipsToBounds);
643+
borderMetrics.borderWidths.left == 0 || self.clipsToBounds ||
644+
(colorComponentsFromColor(borderMetrics.borderColors.left).alpha == 0 &&
645+
(*borderMetrics.borderColors.left).getUIColor() != nullptr));
645646

646647
CGColorRef backgroundColor = [_backgroundColor resolvedColorWithTraitCollection:self.traitCollection].CGColor;
647648

0 commit comments

Comments
 (0)