Custom font?

[nzrin]

How to use custom font in :

calendarHeaderStyle dateNumberStyle dateNameStyle

[peacechen]

Try using the fontFamily style prop: https://facebook.github.io/react-native/docs/text

The props you listed are passed directly to a Text component for those items.

[yatish1606]

The fontFamily prop does not seem to work in calendarHeaderStyle

<CalendarStrip
  style={{height:100, paddingTop: 0, paddingBottom: 10, width:screenWidth -30, marginHorizontal:15, marginTop:10}}
  calendarAnimation={{type: 'sequence', duration: 30}}
  daySelectionAnimation={{type: 'background', duration: 200, borderWidth: 2, borderHighlightColor: '#177fc5', height:40, highlightColor:'#177fc52a'}}
  calendarHeaderStyle={{color: '#177fc5', fontFamily:"MontserratSemiBold", fontSize:10}}
  calendarColor={'#fff'}
  dateNumberStyle={{color: '#878787',fontFamily:'MontserratSemiBold', fontSize:15}}
  dateNameStyle={{color: '#ababab',fontFamily:'MontserratSemiBold', fontSize:9}}
  highlightDateNumberStyle={{color: '#177fc5',fontFamily:'MontserratSemiBold', fontSize:15}}
  highlightDateNameStyle={{color: '#177fc5', fontFamily:'MontserratSemiBold', fontSize:9}}
  scrollable = {true}
  selectedDate={new Date()}
/>

Despite passing MontserratSemiBold, the header text is rendered in default device font

[peacechen]

The calendarHeaderStyle prop is passed to the Text element for the header at https://github.com/BugiDev/react-native-calendar-strip/blob/master/src/CalendarHeader.js#L96

Does the font family work elsewhere in your app? Installing custom fonts is tricky. If all the steps to add the custom font aren't fully complete, it won't have any effect.

[yatish1606]

The calendarHeaderStyle prop is passed to the Text element for the header at https://github.com/BugiDev/react-native-calendar-strip/blob/master/src/CalendarHeader.js#L96

Does the font family work elsewhere in your app? Installing custom fonts is tricky. If all the steps to add the custom font aren't fully complete, it won't have any effect.

Yes, the custom font works well at all other places, even in the dateNumberStyle and dateNameStyle props. The problem is only visible in the calendarHeaderStyle, To be more specific, only the fontFamily prop does not seem to work, other props like fontSize and color work fine inside calendarHeaderStyle

[peacechen]

I tested the fontFamily style in calendarHeaderStyle with the sample app, located in the example folder in this project. It sets the font family as expected.

Try testing with the built-in OS fonts to rule out any issues with loading custom fonts. Here's a list of stock platform mobile OS fonts: https://github.com/react-native-training/react-native-fonts

For example, on Android I tested with

  calendarHeaderStyle={{color: '#177fc5', fontFamily: "monospace",  fontSize:30}}

or on iOS

  calendarHeaderStyle={{color: '#177fc5', fontFamily: "Iowan Old Style", fontSize: 30}}

I experimented with different font families and it reflected in the header text.