From 81f0087669aa312bf00e2b98e7c46b8b90286f03 Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Thu, 6 Mar 2025 16:19:15 -0600 Subject: [PATCH 1/3] fix(macos): with backgroundColor spills color past it's frame --- packages/react-native/Libraries/Text/Text.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js index e327b652a287..a48cde695cff 100644 --- a/packages/react-native/Libraries/Text/Text.js +++ b/packages/react-native/Libraries/Text/Text.js @@ -163,6 +163,17 @@ const Text: component( // $FlowFixMe[incompatible-type] _style = [_style, overrides]; } + + // [macOS + // For some reason, on macOS, Setting backgroundColor without borderRadius on Text will + // cause the color to spill pass the frame of the view. We can solve this by setting a dummy + // value for borderRadius. + if (Platform.OS === 'macos') { + if ('backgroundColor' in _style && !('borderRadius' in _style)) { + _style.borderRadius = 0.001; + } + } + // macOS] } const _nativeID = id ?? nativeID; From 7a03097a833e3be718d15bb59edc30d2bb590b66 Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Fri, 7 Mar 2025 03:54:51 -0600 Subject: [PATCH 2/3] use processedStyle + MIN_VALUE --- packages/react-native/Libraries/Text/Text.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js index a48cde695cff..a346f1c86cb7 100644 --- a/packages/react-native/Libraries/Text/Text.js +++ b/packages/react-native/Libraries/Text/Text.js @@ -159,21 +159,22 @@ const Text: component( overrides.verticalAlign = undefined; } - if (overrides != null) { - // $FlowFixMe[incompatible-type] - _style = [_style, overrides]; - } - // [macOS - // For some reason, on macOS, Setting backgroundColor without borderRadius on Text will - // cause the color to spill pass the frame of the view. We can solve this by setting a dummy + // For some reason on macOS, Setting backgroundColor without borderRadius on Text will + // cause the color to spill pass the frame of the Text. We can solve this by setting a dummy // value for borderRadius. if (Platform.OS === 'macos') { - if ('backgroundColor' in _style && !('borderRadius' in _style)) { - _style.borderRadius = 0.001; + if ('backgroundColor' in processedStyle && !('borderRadius' in processedStyle)) { + overrides = overrides || ({}: {...TextStyleInternal}); + overrides.borderRadius = Number.MIN_VALUE; } } // macOS] + + if (overrides != null) { + // $FlowFixMe[incompatible-type] + _style = [_style, overrides]; + } } const _nativeID = id ?? nativeID; From 254158b727a2f92afbb8b001ddf7b3b012444fda Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Fri, 7 Mar 2025 04:32:17 -0600 Subject: [PATCH 3/3] prettier --- packages/react-native/Libraries/Text/Text.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js index a346f1c86cb7..119c0f311384 100644 --- a/packages/react-native/Libraries/Text/Text.js +++ b/packages/react-native/Libraries/Text/Text.js @@ -164,7 +164,10 @@ const Text: component( // cause the color to spill pass the frame of the Text. We can solve this by setting a dummy // value for borderRadius. if (Platform.OS === 'macos') { - if ('backgroundColor' in processedStyle && !('borderRadius' in processedStyle)) { + if ( + 'backgroundColor' in processedStyle && + !('borderRadius' in processedStyle) + ) { overrides = overrides || ({}: {...TextStyleInternal}); overrides.borderRadius = Number.MIN_VALUE; }