Accurately measure text
width,height, andlineCountusing native layout engines — no view rendered.
| Platform | Engine | Accuracy |
|---|---|---|
| iOS | NSLayoutManager (TextKit) |
✅ Identical to UILabel |
| Android | StaticLayout |
✅ Identical to TextView |
npm install react-native-text-measure
# or
yarn add react-native-text-measurecd ios && pod installAuto-linking handles it on RN >= 0.60. For manual linking see android/README.md.
import { measureText, measureTextSync } from 'react-native-text-measure';
// ── Async (recommended) ───────────────────────────────────────────────────────
const { width, height, lineCount } = await measureText('Hello world', {
fontSize: 20,
fontFamily: 'Helvetica',
fontWeight: 'normal',
maxWidth: 300,
});
// ── Sync (use sparingly — blocks JS thread) ───────────────────────────────────
const result = measureTextSync('Hello', { fontSize: 16 });| Option | Type | Default | Description |
|---|---|---|---|
fontSize |
number |
14 |
Font size in dp/pt |
fontFamily |
string |
system | Font family name |
fontWeight |
string |
'normal' |
'normal', 'bold', '100'–'900' |
fontStyle |
string |
'normal' |
'normal' or 'italic' |
letterSpacing |
number |
0 |
Extra letter spacing in dp/pt |
lineHeight |
number |
0 |
Explicit line height. 0 = natural |
maxWidth |
number |
0 |
Wrap width. 0 = no wrap (single line) |
maxHeight |
number |
0 |
Clamp returned height. 0 = unclamped |
numberOfLines |
number |
0 |
Max lines. 0 = unlimited |
includeFontPadding |
boolean |
true |
Android only. Match your <Text> setting |
{
width: number; // dp (Android) / pt (iOS)
height: number; // dp (Android) / pt (iOS)
lineCount: number;
}- Results are not estimates — both engines perform a full layout pass.
letterSpacingunit differs between platforms (see inline comments).includeFontPaddingmust match your<Text>component on Android.- If
fontFamilyis not found, the system font is used silently — measurement will be accurate but for the wrong font.
MIT