React Native 自定义字体适用于 IOS 但不适用于 Android

Question

I've added the Google Font Fira Sans fonts (Italic, Bold, Regular), following the react-native link procedure.

I can see the fonts have been copied to src/main/assets/fonts , likewise in Resources folder for IOS

The fonts work fine on IOS but on android only Bold works but the Italic or Regular or any other font it doesnt work.

I have tried to set the fontFamily to the name property of the font but still no change

This is how I set my font variable

export const Fonts = {
    //Working on IOS but not on Android
    //I have tried `FiraSans-Italic` `Fira Sans Italic` and nothing works
    FiraSansItalic: (Platform.OS === 'ios') ? "FiraSans-Italic" : 'Fira Sans Italic',

    //Bold works fine for both platforms
    FiraSansBold: (Platform.OS === 'ios') ? "FiraSans-Bold" : "FiraSans-Bold"
}

Any ideas what could be wrong?

Thank you

Answer 1

For someone who got the same problem make sure you're not applying any of these ( fontWeight or fontStyle ) style to your textStyle if you do so it will drop your custom font style from your text.

Answer 2

Check the filename for Android, android need to refer to the file name rather than font family name. Also make sure to set a key to your text/textInput component to make the customized font render properly after changing to a new font. (Android may still render old font if you don't do so)