Question 33753 in React native Question posted in
The official React Native documentation can be found here.

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

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

enter image description here

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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',
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search