dateNumberStyle - custom font family doesn't work

[shivamgly]

I passed the same font family to dateNumberStyle and dateNameStyle. The font family of the week names changes as expected but the font family of the dateNumber does not change.

Screenshot:

I am using Gordita font family everywhere (TTF fonts loaded with expo-fonts). (In the screenshot, see that the font family of day numbers is different than the header text 2021).

Code snippet:

<CalendarStrip
    dateNumberStyle={{
      fontFamily: fonts.fontSecondaryBold,
      color: 'black'
    }}
    dateNameStyle={{
      fontFamily: fonts.fontSecondaryBold,
      color: 'black'
    }}
/>

[peacechen]

dateNumberStyle is passed to CalendarDay in the same fashion as dateNameStyle. It looks like it should work, but you're experiencing an issue that needs to be debugged. Please use the sample app in this repo to recreate the issue. https://github.com/BugiDev/react-native-calendar-strip#development-with-sample-application

[rdoylespk]

I got the same issue. It's only on Android on dateNumber and CalendarHeader. As you can see the font is not the same for the day and the month. Everything is ok on iOS and the font is correct everywhere on Android except for those 2 places

The only way I can change the font family is if I use one of the values here: https://github.com/react-native-training/react-native-fonts.

<CalendarStrip
        calendarAnimation={{type: 'sequence', duration: 30}}
        scrollable={true}
        style={{flex: 1}}
        dateNumberStyle={styles.day}
        dateNameStyle={styles.day}
        dayComponentHeight={80}
        iconStyle={{display: 'none'}}
        highlightDateNumberStyle={[styles.day, {opacity: 1}]}
        highlightDateNameStyle={[styles.day, {opacity: 1}]}
        highlightDateContainerStyle={styles.dayHighlighted}
        locale={{name: 'fr', config: fr}}
        markedDates={markToday}
        calendarHeaderStyle={{
          color: colors.lightColor,
          fontFamily: 'MohrRounded-Bold',
          marginBottom: 2
        }}
        selectedDate={currentDate}
        onDateSelected={changeSelected}
      />

and the style for the dateNumber:

day: {
    color: colors.lightColor2,
    fontFamily: 'MohrRounded-Bold',
    opacity: 0.5,
    marginBottom: 4
}