Font Family Issue

[AunMSheikh]

I cannot seem to change the font family property of the button text here is what i have:

<Button onPress={() => this.validateUser()} style={styles.btnSignIn} containerStyle={styles.btnContainerSignIn}>SIGN IN</Button>

The styling is as follows:
btnContainerSignIn: { paddingTop: 12, paddingBottom: 12, marginLeft: -5, marginRight: -5, backgroundColor: '#386376', borderRadius: 3, }, btnSignIn:{ color: '#fff', fontFamily: 'Arimo', },

The font family is Arimo and it has been imported properly and seems to be working everywhere else except the button. Anyone know a way around this?

[KriYor]

Same problem

[haniotis]

Same

[udhay1415]

Hey, this is an issue with the react-native itself. When the font-weight is bold it automatically assigns the default font-family to the button text. So try making the fontWeight: '400'.

Solution:
fontWeight: '400',
fontFamily: 'Arimo'

[byteab]

@udhay1415 it doesn't have any style property.
how can I add fontWeight

[maxueda]

@udhay1415 it doesn't have any style property.
how can I add fontWeight

I don't think you can. What you can actually do is to create your own button buttons via TouchableOpacity, like this:

https://blog.logrocket.com/creating-custom-buttons-in-react-native/

Follow the instructions from the link above. Then, you can have something like this:

const styles = StyleSheet.create({
// ...
appButtonContainer: {
elevation: 8,
backgroundColor: '#FF29A3',
borderRadius: 12,
paddingVertical: 20,
paddingHorizontal: 11
},
appButtonText: {
fontSize: 33,
fontFamily: 'Roboto',
color: '#fff',
fontWeight: 'bold',
alignSelf: 'center',
}
});