Custom font not applying React Native Elements Button component

Question

Not able to set custom font for Button in react native element.

I am using "react-native-elements": "^0.19.1" version and trying to set custom font for the button. Already the font is working in the page for Text component.

<Button
        rightIcon={{ name: 'history', type: 'font-awesome'}}
        transparent={true}
        title='History'
        fontSize={18}
        fontWeight='bold'
        fontFamily='montserrat'
      />

But the font is not changing or not throwing any error. I tried to give fontFamily "textStyle", "titleStyle" prop also. No luck.

Font inclusion snippet,

async componentWillMount() {
try{
  await Expo.Font.loadAsync({
    montserrat: require("./assets/fonts/Montserrat.ttf"),
    montserrat_light: require("./assets/fonts/Montserrat_light.ttf")
  });
  this.setState({ loading: false });
}catch(error){
  console.warn('Error loading fonts', error);
}

}

Note : Custom fonts are loaded using componentWillMount method.

Thanks in advance.

show the code where you're adding the font, does rnpm not work — Robbie Milejczak
Can you try adding it astextStyle={{fontFamily: 'montserrat'}} — Pritish Vaidya
have you tried loading the font in a normal <Text> component using the style prop? — Robbie Milejczak
can you try using titleStyle={{ fontSize: 18 }} in the button props? — Chandini

Akilan Akilan · Accepted Answer · 2018-09-23T09:37:06

Finally, I found the solution. The problem is fontWeight given for the button. We have to define the Bold font in the Async font loading and call the name in fontFamily.

The following script will resolve my issue,

<Button
        rightIcon={{ name: 'history', type: 'font-awesome'}}
        transparent={true}
        title='History'
        fontSize={18}
        fontFamily='montserrat_bold'
      />

And we need to define the font path in Async like below,

async componentWillMount() {
try{
  await Expo.Font.loadAsync({
    montserrat: require("./assets/fonts/Montserrat.ttf"),
    montserrat_light: require("./assets/fonts/Montserrat_light.ttf"),
    montserrat_bold: require("./assets/fonts/Montserrat-Medium.ttf")
  });
  this.setState({ loading: false });
}catch(error){
  console.warn('Error loading fints', error);
}

}

Custom font not applying React Native Elements Button component

1 Answers