Skip to content

Commit 09fc3b7

Browse files
authored
fix(macos): <Text> with backgroundColor spills color past it's frame (#2401)
## Summary: For some odd reason, if you set `backgroundColor` on a Text component, the color spills out past the frame to the parent. We can work around this by setting border radius... which somehow prevents this behavior. I need to debug the native side more (and may update this PR with a proper fix if I find one), but for now let's patch the JS to set a dummy value for borderRadius if we create a Text Element with backgroundColor and without borderRadius ## Test Plan: A bunch of examples in RNTester are now visible... like the "Recently Viewed" section. <img width="616" alt="image" src="https://github.com/user-attachments/assets/10ac2e6e-2ee6-4a04-8f96-56c92dcc2e68" />
1 parent 3ba1936 commit 09fc3b7

File tree

1 file changed

+15
-0
lines changed
  • packages/react-native/Libraries/Text

1 file changed

+15
-0
lines changed

packages/react-native/Libraries/Text/Text.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,21 @@ const Text: component(
159159
overrides.verticalAlign = undefined;
160160
}
161161

162+
// [macOS
163+
// For some reason on macOS, Setting backgroundColor without borderRadius on Text will
164+
// cause the color to spill pass the frame of the Text. We can solve this by setting a dummy
165+
// value for borderRadius.
166+
if (Platform.OS === 'macos') {
167+
if (
168+
'backgroundColor' in processedStyle &&
169+
!('borderRadius' in processedStyle)
170+
) {
171+
overrides = overrides || ({}: {...TextStyleInternal});
172+
overrides.borderRadius = Number.MIN_VALUE;
173+
}
174+
}
175+
// macOS]
176+
162177
if (overrides != null) {
163178
// $FlowFixMe[incompatible-type]
164179
_style = [_style, overrides];

0 commit comments

Comments
 (0)