CODEWITHSUNDEEP
react-nativetextfontssize
user1295308
user1295308

Reputation: 445

On changing device font, app font changes.How to restrict that?

I have used one custom font in the react native application. And everything is working fine accept when the users go to the phone settings and change the font size. Then in the application the UI looks pretty ugly. I have used StyleSheet.create method to create all the styles in the app and also have given definite font sizes for the texts. But even though when the phone settings font size is changed, my app font size also changes.

Is there a way to restrict any changes in the app's font size, irrespective of what users may do in the phone settings?

Upvotes: 5

Views: 7030

Answers (4)

Bhanu Singhal
Bhanu Singhal

Reputation: 91

For projects using functional components and hook, Add below line in useEffect of App.js file

if (Text.defaultProps == null) Text.defaultProps = {};
       Text.defaultProps.allowFontScaling = false;

Upvotes: 1

gourav.singhal
gourav.singhal

Reputation: 413

Or you can add this in your main app index.js file

// Override Text scaling
if (Text.defaultProps) {
  Text.defaultProps.allowFontScaling = false;
} else {
  Text.defaultProps = {};
  Text.defaultProps.allowFontScaling = false;
}

// Override Text scaling in input fields
if (TextInput.defaultProps) {
  TextInput.defaultProps.allowFontScaling = false;
} else {
  TextInput.defaultProps = {};
  TextInput.defaultProps.allowFontScaling = false;
}

Upvotes: 8

user1295308
user1295308

Reputation: 445

I was able to solve this problem using the following code in every page

constructor() {
    super();
    if (Text.defaultProps == null) Text.defaultProps = {};
       Text.defaultProps.allowFontScaling = false;
}

Hope it can help others as well.

Upvotes: 0

dhruv soni
dhruv soni

Reputation: 89

You can stop the scaling with this prop allowFontScaling={false} in your Text component.

Ref - https://reactnative.dev/docs/text#allowfontscaling

Upvotes: 3

Related Questions