react-native-text-metrics

react-native-text-metrics

Synchronous text measurement for React Native with New Architecture support

Features

• ✅ Synchronous - No async overhead, instant measurements
• ✅ New Architecture - Built with Expo Modules, fully compatible with React Native's new architecture
• ✅ Font Scaling - Respects accessibility font size settings
• ✅ Custom Fonts - Works with any font family
• ✅ Cross-Platform - iOS & Android with identical API
• ✅ TypeScript - Fully typed API
• ✅ Zero Config - No patches, no post-install scripts

Installation

npm install react-native-text-metrics
# or
yarn add react-native-text-metrics

Expo Projects

npx expo install react-native-text-metrics
npx expo prebuild --clean

Bare React Native Projects

npm install react-native-text-metrics
npx pod-install

Usage

import { measureWidth } from "react-native-text-metrics";

// Basic usage
const width = measureWidth("Hello World");
console.log(width); // e.g., 82.5

// With custom style
const width = measureWidth("Hello World", {
  fontSize: 16,
  fontFamily: "Arial-Bold",
  fontWeight: "bold",
  letterSpacing: 0.5,
  allowFontScaling: true,
});

API

measureWidth(text, style?)

Measures the width of text with optional styling.

Parameters:

• text (string) - The text to measure
• style (object, optional) - Style configuration
  • fontSize (number) - Font size in points/sp (default: 14)
  • fontFamily (string) - Font family name (e.g., 'Arial', 'Helvetica-Bold')
  • fontWeight (string) - Font weight: 'normal', 'bold', or '100'-'900' (default: 'normal')
  • letterSpacing (number) - Letter spacing in pixels (default: 0)
  • allowFontScaling (boolean) - Apply accessibility scaling (default: true)

Returns: number - Width in pixels

Real-World Example

import { measureWidth } from 'react-native-text-metrics';
import { Text, View } from 'react-native';

function TruncatedText({ text, maxWidth }) {
  const width = measureWidth(text, {
    fontSize: 14,
    fontFamily: 'System',
  });

  const needsTruncation = width > maxWidth;

  return (
    <View style={{ width: maxWidth }}>
      <Text numberOfLines={1} ellipsizeMode="tail">
        {text}
      </Text>
      {needsTruncation && <Text style={{ fontSize: 10 }}>...</Text>}
    </View>
  );
}

Why This Package?

Most React Native text measurement solutions are:

• ❌ Asynchronous (requires callbacks or promises)
• ❌ Not compatible with New Architecture
• ❌ Require manual patches
• ❌ Don't support accessibility font scaling

This package solves all of these issues by using Expo Modules to create truly synchronous native bindings.

Platform Support

• ✅ iOS 13.0+
• ✅ Android API 23+
• ✅ Expo SDK 50+
• ✅ React Native 0.72+

Performance

Measurements are performed synchronously on the native side with minimal overhead:

• iOS: Uses NSString.size(withAttributes:)
• Android: Uses Paint.measureText()

Typical measurement takes < 0.1ms per call.

Troubleshooting

Module not found

Make sure to rebuild your app after installation:

# For Expo
npx expo prebuild --clean
npx expo run:ios
npx expo run:android

# For bare React Native
cd ios && pod install && cd ..
npx react-native run-ios
npx react-native run-android

Custom fonts not working

Ensure your custom fonts are properly linked in your project. For Expo, use the expo-font package.

Contributing

Contributions are welcome! Please open an issue or PR on GitHub.

License

MIT © Sahesh