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