You add a Read more link under a product description, and then it shows up under a one-line blurb too. Building a wallpaper app on my own, I hit exactly this awkwardness on the detail screen and stopped to fix it properly. Long copy should collapse; short copy needs no toggle at all. The decision to show it or not should come from the number of lines that actually rendered, not from an unreliable proxy like character count. That is what this piece is about.
In React Native, which is the foundation the standard apps Rork generates sit on top of, a Text component will clamp and add an ellipsis when you set numberOfLines. What it will not do is tell you whether clamping happened. To show the toggle correctly, you have to measure whether the rendered body truly exceeds the line limit yourself.
Character counts always break somewhere
The first instinct is a threshold: show the toggle when the body passes 120 characters. It is easy, and it drifts almost immediately. Japanese and English fit wildly different amounts of text per line, and emoji, URLs, and line breaks all move the count. The same 100 characters land in two lines on a wide device and four lines on a small iPhone. Character count guarantees nothing about how many lines appear on screen.
I once shipped the threshold approach. It looked fine in Japanese, then the moment I switched to an English locale a wave of empty toggles appeared under short text. Moving the basis of the decision from input length to the rendered result looked like the long way around, but it was the reliable one.
Read the rendered line count with onTextLayout
React Native's Text has an onTextLayout callback. After the text is laid out, it hands you an array with information about each line. The line count is simply the length of that array.
The crucial detail: do not attach numberOfLines while measuring. If you do, the layout result is rounded to that limit, and you cannot tell whether the text was five lines clamped to three or genuinely three lines. So you measure once with no limit, look at the result, and decide whether the toggle is needed.
import { useState, useCallback } from 'react';
import { Text, Pressable, View, type TextLayoutEventData, type NativeSyntheticEvent } from 'react-native';
const COLLAPSED_LINES = 3;
type Props = { children: string };
export function ExpandableText({ children }: Props) {
// needsToggle: does the body exceed 3 lines?
// measured: have we measured once already?
const [needsToggle, setNeedsToggle] = useState(false);
const [measured, setMeasured] = useState(false);
const [expanded, setExpanded] = useState(false);
const onTextLayout = useCallback(
(e: NativeSyntheticEvent<TextLayoutEventData>) => {
if (measured) return; // ignore re-layouts after expanding
const lineCount = e.nativeEvent.lines.length;
setNeedsToggle(lineCount > COLLAPSED_LINES);
setMeasured(true);
},
[measured],
);
return (
<View>
{/* Measurement pass: render once off-screen with no limit to get the count */}
{!measured && (
<Text
onTextLayout={onTextLayout}
style={{ position: 'absolute', opacity: 0, left: 0, right: 0 }}
accessibilityElementsHidden
importantForAccessibility="no-hide-descendants"
>
{children}
</Text>
)}
{/* Display pass: clamp with numberOfLines only when collapsed */}
<Text numberOfLines={expanded ? undefined : COLLAPSED_LINES}>
{children}
</Text>
{needsToggle && (
<Pressable
onPress={() => setExpanded((v) => !v)}
hitSlop={8}
accessibilityRole="button"
accessibilityLabel={expanded ? 'Collapse text' : 'Read more'}
>
<Text style={{ color: '#2563eb', marginTop: 4 }}>
{expanded ? 'Show less' : 'Read more'}
</Text>
</Pressable>
)}
</View>
);
}The measurement Text is placed off-screen with absolute positioning and zero opacity, rendered once, then removed as soon as the count is known. The display Text applies numberOfLines only while collapsed. This two-layer approach lets you know whether clamping occurred while keeping flicker to a minimum. Always hide the measurement element from screen readers, or the reader will pick up the body twice.