Skip to main content

Getting Started

pretext-native lets you measure text height and line breaks before rendering in React Native.

Installation​

yarn add pretext-native
# or
npm install pretext-native

iOS​

cd ios && pod install

Android​

No additional setup needed.

Requirements​

  • React Native 0.71+
  • iOS 13+
  • Android API 21+
  • Supports both New Architecture (TurboModules) and Legacy Bridge

Quick Example​

import { useTextLayout } from 'pretext-native';

function ChatBubble({ text }) {
  const { height, lineCount, isTruncated } = useTextLayout({
    text,
    width: 280,
    fontSize: 15,
    lineHeight: 22,
    maxLines: 5,
  });

  return (
    <View style={{ height }}>
      <Text numberOfLines={5} style={{ fontSize: 15, lineHeight: 22 }}>
        {text}
      </Text>
    </View>
  );
}

How It Works​

pretext-native talks directly to the platform's native text engine — the same one React Native uses internally:

  • iOS: CoreText (CTFramesetter) — thread-safe, no UIKit dependency
  • Android: StaticLayout — the exact engine React Native uses
  • JS Fallback: Heuristic character-width estimation (for testing/SSR)

Results are cached with a two-tier LRU cache (word-level + layout-level), achieving 95%+ hit rate on real-world data.

Next Steps​