1. Edit the _data/metadata.json with your site's information.
  2. (Optional) Edit .eleventy.js with your configuration preferences.
  3. Delete this message from _includes/layouts/base.njk.

This is an Eleventy project created from the eleventy-starter repo.

React Native - Text Size & Font Scaling

React Native Text Size & Font Scaling

In React Native, a default behavior of the <Text> Component is to respect the Text Size accessibility setting on iOS.

In a perfect world, your app would be 100% accessible and the UI would gracefully adapt to any text size. In reality, parts of your app's UI may break if the text size is adjusted. To disable this behavior on a <Text> Component, set it's allowFontScaling prop to false:

<Text allowFontScaling={false}>
Hi! I will not change. I don't respect settings.
</Text>
<Text>
Hi! I may change. By default, I respect the Text Size accessibility setting on iOS.
</Text>

Note: Most icon fonts (like react-native-vector-icons) are affected by font scaling. And last I checked, font scaling behavior isn’t present in the iOS Simulator; only physical devices. That makes this behavior easy to miss during development.

Share on Twitter