React Native Text Cut Off on iPhone SE: The Fix

Text that looks fine on an iPhone 15 and gets chopped on an iPhone SE is one of the most common React Native layout complaints, and it is almost always the same root cause. The SE is both narrow and short, so a layout that barely fits on a bigger phone overflows, and if the text cannot shrink or wrap, it clips. Fix the layout to flex and the problem disappears across every device. Here is why it happens and the fixes that hold at any size. To start from a layout that already flexes, use a free VP0 design (the free iOS and React Native design library AI builders read from) at $0.

Why the SE clips when bigger phones do not

Two reasons, often together. First, fixed heights: a card or row with a hard-coded height cannot grow when text needs a second line, so the second line is cut off. Second, text that cannot shrink: in a row with an icon and a label, if the label’s container has no flexShrink, the text holds its full intrinsic width and overflows the narrow screen instead of yielding. The SE just exposes what was always fragile. The same fragility shows up with accessibility text sizes, which is why this is a cousin of Dynamic Type scaling in React Native.

The fixes that actually hold

Symptom	Cause	Fix
Second line clipped	Fixed height on the container	Remove the height; let it grow
Label overflows a row	No flexShrink on the text container	flexShrink: 1 on the text’s parent
One-line title clipped	Fixed width, no shrink	adjustsFontSizeToFit + minimumFontScale
Clips only for some users	Large Dynamic Type	Test at the biggest size, allow wrapping

The core move is to stop hard-coding dimensions and let flexbox do its job. Give the text’s container flexShrink: 1 so a long label gives way in a tight row, drop fixed heights on anything that wraps text, and let text flow to multiple lines. The React Native Text docs cover numberOfLines and adjustsFontSizeToFit, and the layout with flexbox guide covers how shrink and wrap interact. Reserve adjustsFontSizeToFit (with a minimumFontScale) for single-line text that must fit a fixed space; for body text, wrapping reads better than shrinking.

Test where it breaks first

The SE at the largest Dynamic Type setting is the worst case, so test there. Apple’s typography guidance is built around text that scales, and users who set large accessibility text hit clipping first. Make the smallest-device, largest-font combination part of your check, not an afterthought. The discipline of testing AI output at the edges is the same one that catches SwiftUI memory leaks in AI-generated code and localized layout bugs in the React Native RTL flexbox fix. For a hardware-constrained surface where space is even tighter, the same flex rules carry into the CarPlay audio app template in SwiftUI.

The same hardcoded-number trap from the notch end, where agents clip content under the Dynamic Island, is fixed in the Lovable safe-area guide.

Key takeaways

• The iPhone SE clips because it is small; fixed heights and non-shrinking text are the cause.
• Remove hard-coded heights from anything that wraps text.
• Give a text container flexShrink: 1 so long labels yield in tight rows.
• Use adjustsFontSizeToFit with minimumFontScale only for single-line fixed-width text; wrap body text.
• Test the SE at the largest Dynamic Type size, and start from a flexible VP0 layout at $0.

Frequently asked questions

Why is my text cut off on the iPhone SE but fine on bigger phones?

The iPhone SE has a narrow, short screen, so a layout that just fits on a larger phone overflows on the SE. The usual cause is a fixed height on a container or a row whose text cannot shrink or wrap, so the text is clipped instead of reflowing. Remove fixed heights and let the text flex, and it stops clipping.

How do I stop text from being cut off in React Native?

Let the layout flex instead of fixing it. Give the text’s container flexShrink: 1 so a long label yields space in a row, avoid fixed height on anything wrapping text, allow the text to wrap to multiple lines, and use adjustsFontSizeToFit with a minimumFontScale if it must stay on one line. Then test at the largest Dynamic Type size.

What is flexShrink and why does it fix cut-off text?

flexShrink controls how much a flex item gives up space when the row is too tight. In a row with an icon and a label, if the label’s container has flexShrink: 1 it shrinks and wraps or ellipsizes gracefully instead of pushing siblings off-screen or being clipped. Without it, the text holds its intrinsic width and overflows on small screens.

Should I use adjustsFontSizeToFit in React Native?

Use it for single-line text that must fit a fixed width, like a title in a fixed header, and pair it with minimumFontScale so it does not shrink to unreadable. For body text, prefer wrapping to multiple lines instead, because shrinking long paragraphs hurts readability. Test both at large Dynamic Type.

What is the best way to build React Native layouts that never clip text?

Start from a layout that flexes by default and test it on the smallest device at the largest font. A free VP0 design, the free iOS and React Native design library for AI builders, gives you flexible, well-structured screens to generate in Cursor or Claude Code at $0, so text reflows instead of clipping.