Android: `font-bold` via className clips multi-word text after a space (identical plain `style` renders correctly)
Summary
On Android, a <Text> styled with className="text-2xl font-bold" renders multi-word content clipped at the first word-break: everything after the first line-wrap opportunity (a space) is invisible. The identical styles passed as a plain RN style object render correctly on the same device, which is what points this at the css-interop style pipeline rather than RN core.
It looks like a measure/draw mismatch: the text seems to be measured without the bold typeface but drawn with it. Bold glyphs are wider, so the string no longer fits the measured width, wraps at the space, and the second line falls outside the measured (single-line) height — silently invisible.
Minimal reproduction
import { Text, View } from 'react-native';
export default function Repro() {
return (
<View className="flex-1 items-center justify-center">
{/* BROKEN on Android: renders "Welcome," — "Emily" is invisible */}
<Text className="text-2xl font-bold">Welcome, Emily</Text>
{/* WORKS: identical metrics via plain style */}
<Text style={{ fontSize: 24, lineHeight: 32, fontWeight: '700' }}>Welcome, Emily</Text>
</View>
);
}Observed matrix (all on the same Android device, cold start — not a stale-cache artifact):
| Case | Result |
|---|---|
className="text-2xl font-bold", text contains a space |
✗ clipped after first line-break opportunity |
Same, text without a space (Welcome,Emily) |
✓ full render (nothing to wrap on) |
Same, with a sibling child (<Text>x{'Welcome, Emily'}</Text>) |
✓ full render |
className="text-2xl font-semibold" |
✓ full render (possibly only masked — 600's smaller width delta may simply still fit the measured box) |
className="text-xs" (smaller than default) |
✓ full render |
| No className | ✓ full render |
Plain style={{ fontSize: 24, lineHeight: 32, fontWeight: '700' }} |
✓ full render |
The child kind is irrelevant — a literal string, a {template ${literal}}, and a component returning a string (e.g. Lingui's <Trans>) all clip identically under font-bold.
iOS is unaffected in all cases.
Possibly related RN-core issues with similar symptoms on custom-system-font devices (facebook/react-native#21729, #15114) — but the plain-style control rendering correctly on the same device suggests the trigger here is specifically how className-derived fontWeight reaches (or fails to reach) the Android text-measurement pass.
Environment
- nativewind: 4.2.6
- react-native-css-interop: 0.2.6
- react-native: 0.86.0 (new architecture / Fabric)
- expo: ~57.0.7
- react: 19.2.3
- tailwindcss: 3.4.19
- Android: Pixel 9 emulator, API 35
- Reproduced in a debug dev-client build (Metro), cold start
Workaround
Move the font metrics out of className into a plain style object and keep only non-metric classes:
<Text className="text-foreground" style={{ fontSize: 24, lineHeight: 32, fontWeight: '700' }}>Source: nativewind/nativewind