React-native-calendars: Propagate text and base styles from theme to day and calendar

[valinaga]

While theme can change some global properties of the calendar, it does not take into account the text and base styles.
For example:
theme={{
todayTextColor: 'red',
base: { width: 20, height: 20, justifyContent: 'center' },
text: { marginTop: 0, fontSize: 13.5, }
}}
only update the todayTextColor.
Also I noticed there's a default 32 width for the day box in calendar which can also needs to take the value from the theme base style.

[tautvilas]

Hi, it is not feasible to make the callendar ux fully customizable. If there is a need for a very different design then it would be best to give you a way to provide a way to override renderDay method.

What is the problem that you are trying to solve with such customization?

[valinaga]

As it was in the example above, I need to make the calendar shorter in height, and to look nice as well.
Thus, by decreasing the font alone, it's not enough. I need to change the base width and height and also the default width which now is 32.
I can send you some snipped code I used to modify the calendar and the day.

[tautvilas]

What is the calendar height you want to use?

[valinaga]

275, with 13.5 font size and 20x20 day box.
basically:
base: { width: 20, height: 20, justifyContent: 'center' }, text: { marginTop: 0, fontSize: 13.5, }

[gabrielgilini]

I personally think the theme prop strategy is very limiting so I went ahead and introduced the styleSheet prop to Calendar, which I passed down the nodes and appended to each component's style array. This allowed me to freely override defaults and customize the looks to my need. I don't think it's complete enough to create a PR, but I'll just link to my commit in case anyone is going through a similar problem.

I.e.:

const calendarStyles = StyleSheet.create({
  header: {
    backgroundColor: colors.azure,
    paddingVertical: 10
  },
  week: {
    backgroundColor: colors.azure,
    marginTop: 0,
    paddingBottom: 10,
  },
  monthText:{
    fontSize: 24,
    lineHeight: 30,
    margin: 0,
    letterSpacing: 1.45,
    color: colors.paleGrey,
  },
  dayHeader: {
    fontSize: 18.2,
    color: colors.paleGrey,
  },
  day: {
    justifyContent: 'center'
  },
  dayText: {
    fontSize: 18.2,
    color: colors.warmGreyThree,
    marginTop: 0,
  },
  todayText: {
    fontSize: 18.2,
    color: colors.warmGreyThree,
    marginTop: 0,
  },
  disabledText: {
    opacity: 0.5,
    fontSize: 18.2,
    color: colors.warmGreyThree
  }
});

<Calendar
  style={styles.calendar}
  monthFormat='MMMM'
  markedDates={marked}
  renderArrow={(direction) => <Icon name={direction == 'left' ? 'navLeft' : 'navRight'} />}
  styleSheet={calendarStyles} />

[tautvilas]

Closing as duplicate of #100