Home > front end >  Is allowFontScaling=false in <Text/> component a bad practice?
Is allowFontScaling=false in <Text/> component a bad practice?

Time:01-19

i'm currently coding my new React Native app and i tried to use it on my brother's phone and i noticed the font size of most of the <Text/> components look bigger on his phone, and i was reading a lot of documentation and Github discussions until i found that allowFontScaling={false} was my solution, the <Text/> looks equal in both devices (i thought my problem was fixed), later i read this question and people say it's a bad practice. I don't actually like the bad practices, so i'm not sure if implement it.

CodePudding user response:

As mentioned in this answer. Yes, using allowFontScaling=false in <Text/> component is a bad practice. Because endusers may prefer the font size used on that device comfortable.

if you must use these below code, however try the different font size in different devices, and use the average font size. It may work.

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

CodePudding user response:

If you are using TypeScript add this line to your App.tsx | your entry page

interface TextWithDefaultProps extends Text {
    defaultProps?: { allowFontScaling?: boolean };
}

((Text as unknown) as TextWithDefaultProps).defaultProps =
((Text as unknown) as TextWithDefaultProps).defaultProps || {};
((Text as unknown) as TextWithDefaultProps).defaultProps!.allowFontScaling = false;

  •  Tags:  
  • Related