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

Question

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).

Answer 1

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',
  },
});