Supporting Dynamic Type in React Native (iOS)

Question

Does anyone know how to implement Support For Dynamic Type in React Native?

Ideally, we would like to listen for when someone has changed the size of the system font, and perform some type of callback.

Or even better, prevent Font Scaling from being implemented at all on some components.

score 28 · Accepted Answer · edited Jun 07 '18 at 09:26

28

Well, turns out you can apply:

allowFontScaling={false}

To prevent this.

This worked for me:

<Text allowFontScaling={false}>Do not want font to scale</Text>

edited Jun 07 '18 at 09:26

David Schumann

13,380
9
75
96

answered Jan 27 '16 at 19:43

Nader Dabit

52,483
13
107
91

score 8 · Answer 2 · edited Jun 07 '18 at 09:26

8

To solve this problem globally, set allowFontScaling in defaultProps of your root component like so:

constructor() {
    super();
    Text.defaultProps.allowFontScaling = false; // Disallow dynamic type on iOS
}

edited Jun 07 '18 at 09:26

David Schumann

13,380
9
75
96

answered Aug 08 '17 at 06:41

gavdotnet

2,214
1
20
30

I put this in my app constructor and I am getting `TypeError: undefined is not an object (evaluating '_reactNative.Text.defaultProps.allowFontScaling = false')` – khateeb Oct 10 '18 at 07:24
Try without the `defaultProps`. ie. `Text.allowFontScaling = false;`. Looks like it is a recent change to RN (see: https://github.com/infinitered/ignite/issues/1313) – gavdotnet Oct 11 '18 at 01:35

score 5 · Answer 3 · answered Jun 17 '20 at 08:50

5

Generally speaking, you should not prevent font scaling as you will be deliberating making your app less accessible. Some users find it difficult to read content due to sensory difficulties or hardware limitations like small screens.

answered Jun 17 '20 at 08:50

Jon Gibbins

887
7
14

1

This is the only correct answer. People scale fonts because they can't read otherwise! – scrayne Jun 06 '23 at 12:45

score 1 · Answer 4 · answered Nov 24 '20 at 23:15

1

Late here but needed this to work for me

Text.defaultProps = Text.defaultProps || {}
Text.defaultProps.allowFontScaling = false

answered Nov 24 '20 at 23:15

Sharif Corbic

11
2

Supporting Dynamic Type in React Native (iOS)

4 Answers4

Linked