skip to content

In React Native, what does adjustsFontSizeToFit do, and when is it acceptable for text that grows too large?

level: middleimportance: should knowfreq 25%

answer

  1. shrinks text to fit its box
  2. needs a constraint such as numberOfLines
  3. minimumFontScale sets the floor
  4. it undoes the user's larger text
  5. short labels in fixed space only

basics

~20 s

adjustsFontSizeToFit shrinks a Text until it fits its constraints, such as numberOfLines and the available width, down to minimumFontScale; because it undoes the user's larger text, it suits only short labels in fixed space, never body text.

solid answer

~40 s

`adjustsFontSizeToFit`, `false` by default and available on both platforms, tells a `Text` to scale its font down until the content fits its style constraints, typically `numberOfLines` plus the width the layout gives it. `minimumFontScale`, a value from 0.01 to 1.0 documented for iOS, sets how far it may shrink. It is the opposite of what a large-text user asked for: the system grows the text, and this prop shrinks it back. So I use it only for short strings in space that genuinely cannot grow, such as a seat code in a fixed circular badge or a tab label, with a sensible floor, and I never use it on the passenger name, flight details or any paragraph. For those, the layout must grow instead.

code

tsx · 16 lines
tsx
import {StyleSheet, Text, View} from 'react-native';

export function SeatBadge({seat}: {seat: string}) {
  return (
    <View style={styles.circle}>
      <Text style={styles.seat} numberOfLines={1} adjustsFontSizeToFit minimumFontScale={0.6}>
        {seat}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  circle: {width: 64, height: 64, borderRadius: 32, alignItems: 'center', justifyContent: 'center'},
  seat: {fontSize: 24, fontWeight: '700', paddingHorizontal: 6},
});

go deeper

for a junior

Recall that adjustsFontSizeToFit shrinks text to fit its box and needs numberOfLines or a bounded width to work.

for a middle

Explain why it conflicts with the user's text size, what minimumFontScale does, and when a maxFontSizeMultiplier cap is the better tool.

for a senior

Show how you audit uses of the prop, keep it on tiny fixed-shape labels with floors, and fix layouts that used it to hide growth.

for a principal

Define when fitting text is an allowed exception in the design system, so shrinking essential text never ships as a quick fix.

## What the prop does `adjustsFontSizeToFit` is a `Text` prop that makes React Native **reduce the font size until the text fits** the space its style allows. Its default is `false`. React Native lists it among both the iOS and the Android `Text` props, so it works on both platforms. For it to have anything to fit, the text needs a **constraint**: - `numberOfLines`, for example `1`, so the text may not wrap beyond that; and - a width (and possibly a height) that the layout gives the `Text`, from its parent, a fixed size, or flex. Without a constraint, the text simply wraps or grows and there is nothing to shrink for. The companion prop **`minimumFontScale`** sets the floor: a value from 0.01 to 1.0 giving the smallest scale the font may reach. React Native documents it as an iOS prop. With `minimumFontScale={0.6}`, a 20-point label never goes below 12 points. ## Why it conflicts with large text When a user chooses a larger system text size, React Native scales the text up. `adjustsFontSizeToFit` then scales it back down to fit the box, so the user's choice is partly or wholly cancelled. At the largest accessibility sizes, a label allowed to shrink to half its scaled size ends up far smaller than the size the user's setting asked for. That is the correct outcome only when **fitting the whole string matters more than its size**, and the space truly cannot grow. ## When it is acceptable | Text | Use `adjustsFontSizeToFit`? | Why | |---|---|---| | seat code such as "12A" in a fixed circular badge | acceptable, with a floor | two or three characters, fixed shape, full string matters | | tab label under an icon | acceptable, with a floor, plus the iOS large content viewer | fixed-height bar | | gate number in a large header | usually better to cap with `maxFontSizeMultiplier` | the header can grow a little | | passenger name, flight details, boarding time | no | essential reading text; the layout must grow | | paragraphs of any kind | no | shrinking body text defeats the setting | ## How to use it responsibly 1. **Constrain explicitly.** Set `numberOfLines` and make sure the `Text` has a bounded width, or nothing will shrink. 2. **Set a floor.** Pick a `minimumFontScale` that keeps the text readable instead of shrinking to near nothing. 3. **Prefer a cap where the space can grow a little.** `maxFontSizeMultiplier` lets text grow up to a limit; `adjustsFontSizeToFit` shrinks it after it has grown. For headers, a cap is usually the kinder tool. 4. **Offer another way to read it.** For iOS chrome such as a tab bar, enable the large content viewer so a long press shows the label enlarged. 5. **Check it at the largest size on both platforms**, since fitting depends on each platform's text measurement. ## Known history The React Native 0.84 changelog records a fix for `adjustsFontSizeToFit` scaling the font down more than necessary. If an older app shows labels shrinking further than their box requires, that is the likely cause, and on 0.87 it should not reproduce. ## Summary `adjustsFontSizeToFit` is a fitting tool for tiny, fixed-shape labels, not an accessibility setting. Treat each use as a deliberate exception, give it a floor, and keep it away from the text people actually read.

  • Why does adjustsFontSizeToFit sometimes appear to do nothing?
    It needs a constraint to fit against. Without `numberOfLines` or a bounded width, the text wraps or the container grows, so there is never an overflow to shrink for. Give the `Text` `numberOfLines` and make sure its parent limits its width.
  • How do maxFontSizeMultiplier and adjustsFontSizeToFit differ for a large-text user?
    `maxFontSizeMultiplier` lets text grow with the user's setting up to a ceiling, so the user still gets larger text. `adjustsFontSizeToFit` shrinks text after scaling so it fits a fixed box, which can cancel the setting. Prefer the cap where the space can grow a little; keep fitting for tiny fixed-shape labels.

saying these in an interview costs you the question

  • adjustsFontSizeToFit is an accessibility feature that respects the user's text size.
  • adjustsFontSizeToFit works without numberOfLines or a bounded width.
  • Apply adjustsFontSizeToFit to paragraphs so they always fit the screen.
  • adjustsFontSizeToFit makes text grow to fill the available space.
  • adjustsFontSizeToFit is an iOS-only prop in React Native.