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

Issue

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

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

Answered By - PaleRedDot
Answer Checked By - - David Marino (ReactFix Volunteer)