#1846·nativewind

Android: `font-bold` via className clips multi-word text after a space (identical plain `style` renders correctly)

Author: semvgeloovenCreated Jul 23, 2026Updated Sep 9, 2026

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

typescript
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:

typescript
<Text className="text-foreground" style={{ fontSize: 24, lineHeight: 32, fontWeight: '700' }}>