How do I handle font scaling in React Native?

If your layout looked right until someone with a larger text size opened it, and now labels wrap, buttons overflow, or text gets cut off, nothing is broken. React Native text follows the text size the user picked in their phone’s settings by default, so the font sizes in your styles are a starting point, and your layout has to make room when they grow.

How it works

Text and TextInput both have allowFontScaling, which is true by default. With it on, each font size you set is multiplied by the user’s font scale. You can read that multiplier with useWindowDimensions().fontScale, which updates when the setting changes, or with PixelRatio.getFontScale(). On Android it comes from Settings > Display > Font size, and on iOS from Settings > Display & Brightness > Text Size, which can go larger under Accessibility > Display & Text Size > Larger Text.

We’d keep scaling on. Turning it off with allowFontScaling={false} keeps the app tidy at the default size, but it leaves the people who chose larger text because they need it with text they can’t read. It’s better to let text grow and fix the few places where that breaks the layout.

How to fix it

1. Cap the spots that can’t grow much, like tab labels or a badge, with maxFontSizeMultiplier. A value of 1 or more sets the cap, and 0 means no cap:

   <Text style={styles.tabLabel} maxFontSizeMultiplier={1.3}>
     Home
   </Text>

2. Set a cap across the app with your own text component. Older answers suggest Text.defaultProps, but since React 19, defaultProps no longer works on function components, which includes Text, so it has no effect. A small wrapper works instead:

   import { Text, type TextProps } from "react-native";
   
   export function AppText(props: TextProps) {
     return <Text maxFontSizeMultiplier={1.5} {...props} />;
   }

   Because props comes last, a screen can still pass its own maxFontSizeMultiplier.

3. Let containers grow with the text. Replace fixed height values on anything that holds text with minHeight and padding, so a row gets taller instead of clipping its label.

4. Change the layout when the scale is large. Side-by-side rows that fit at normal size can need to stack:

   const { fontScale } = useWindowDimensions();
   const stacked = fontScale > 1.3;
   
   <View style={{ flexDirection: stacked ? "column" : "row", gap: 8 }}>
     <Text>Delivery</Text>
     <Text>Tomorrow, 9 to 11 am</Text>
   </View>;

5. For a one-line label that has to fit, add adjustsFontSizeToFit with numberOfLines={1}, which shrinks the text to fit its space rather than cutting it off.

If you were looking for text that resizes with the screen width, that’s a separate idea from font scaling. Keep allowFontScaling on if you do it, so the user’s setting still applies on top of your size.

How you know it works

On a test phone with the text size set to its largest, walk through the main screens of your app. Text is bigger everywhere, nothing is clipped or overlapping, and the capped labels grow only up to their limit.

If text still gets cut off

Look for a fixed height or width on a parent view, or a numberOfLines that truncates text you didn’t mean to limit. TextInput scales too and accepts the same maxFontSizeMultiplier, so a search field with a fixed height can clip its own text. Images don’t follow the font scale, so if one sits beside a label, size it with fontScale as well to keep the two in proportion.