React Native Android Fonts don't work when specific font-family is not applied

Question

I have the following files added in the android/src/main/assets folder.

Poppins-Bold.ttf
Poppins-Regular.ttf
Poppins-Light.ttf
Poppins-Medium.ttf
Poppins-MediumItalic.ttf

When applying font-family as follows in my stylesheet

header: {
  fontFamily: 'Poppins',
  fontWeight: '700'
}

This works fine on iOS but the font-family is not applied on Android. After going through some answers provided, I figured out we could apply the following directly and it'll work

header: {
  fontFamily: 'Poppins-Bold',
}

This works on both Android and iOS. But the problem here is, if I want to give my devs control on font-weight with this custom font, can't do that.

Is there no way to, say maybe combine all ttf's to one ttf and use it with font-weight or some efficient way to fix this in Android?

Answer 1

you can follow step to do this

make js file react-native.config.js

module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['../../assets/fonts'],
};

then make fonts folder inside android assets and copy all

End in js file used font like

 txtLoginDescription: {
    color: COLORS.F_1E1F22,
    fontSize: 12,
    width: '100%',
    textAlign: 'center',
    fontFamily: 'Montserrat-Regular',
    fontWeight: '400',
    marginTop: 15
},