Skip to main content
Logo Appt Light

Scale text on React Native

Apps should scale text to the size specified by users in the system settings. This is especially important for visually impaired users because they might not be able to read the text otherwise.

React Native automatically scales text depending on the font size preferences of the user settings. In addition, all dimensions in React Native are unitless, and represent density-independent pixels.

Try to avoid using properties such as maxFontSizeMultiplierallowFontScalingadjustsFontSizeToFit and numberOfLines. Using these properties may cause text to be unscalable or become inaccessible.

When inheriting a project you may find previous developers have disabled font-scaling with the following code: Text.defaultProps.allowFontScaling = false;. This is accessibility anti-pattern and should be rolled back.

The code example below shows how to have a scaling font size.

<Text style={{ fontSize: 16 }}>
    Appt
</Text>

Feedback?

Let us know!