React-native font-size changes when OS font-size changes

React-native text getting OS font-size

React-native font-size getting OS font-size issue

Hi guys, in this article, we going to solved problem about font size i.e. React-native getting OS font-size, when user increase font-size from mobile display settings than our Application also increase font-size with respect to Operating system font size, and thus, our mobile application UI looks bad, thus this was one of the important bugs while developing an application, first let’s see what is actually issue

React-native font-size changes when OS font-size changes
React-native font-size changes when OS font-size changes

Let’s start with the new project

1. Create a new project

2. Imports following components

Now, we have to set text default property allowFontScaling to false

You can also set this allowFontScaling property to directly Text component like below

But for bis project, this would be a tedious task to do, so you need to add the following lines in your constructor or you base activity screen

So the constructor looks as follows

3. Home.js or App.js

In my project this Home.js, I have created this project for Navigation drawer example you can see this post for the same

This is you can set allowFontScaling false for Screen, this will reflect in whole Screen or application

4. Output:

As you see in above screenshots even if you change mobile OS font-size from settings our application doesn’t get reflected this font-size, thus our application UI design looks nice and clean look and feels to the user, this font-size issue is serious when you run you application on small screen smartphone and increase os font size from mobile settings.

Hope you like this post, thank you 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *