How to prevent android system fonts setting from changing the fonts in react-native apps?

How to prevent android system fonts setting from changing the fonts in react-native apps?

Problem Description:

So we have this weird bug when the users change the font type to Bold. it ruin the app’s layout, and the icons fail to load, instead of icons it show [x] symbol or some Chinese characters (I think this behavior depends on the user’s phone).

Solution – 1

To disable scale app’s font size by system’s font size, just disable allowFontScaling props in Text tag, example:

<Text allowFontScaling={false}>Demo</Text>

For the Bold text’s setting, i don’t have any idea for this.

Solution – 2

You can add this code to index.js

    AppRegistry.registerComponent(appName, () => App);

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

It will disable all the text in app to scaling.

Solution – 3

Other way, you can use custom componets to control this issue. for example,

import React from 'react';
import {StyleSheet, Text, TextStyle} from 'react-native';

type Props = {
  children: any;
  color: string;
  fontSize: number;
  style?: TextStyle;
};

export default function TextNormal({
  children,
  color,
  style,
  fontSize,
}: Props) {
  return (
    <Text style={[styles.text, {color, fontSize}, style]}>{children}</Text>
  );
}
const styles = StyleSheet.create({
  text: {
    fontWeight: 'normal',
  },
});