React Native change calendar height

Question

I'm trying to make a page with a calendar and some other stuff under it. I'm using wix/react-native-calendars and I can't change the height of the calendar. When I put the height I'd like it to be it just cut the calendar instead.

  <CalendarList
    horizontal={true}
    pagingEnabled={true}
    style={{height: SCREEN_HEIGHT * 0.4}}
  />

Answer 1

If you want to have complete control over the calendar styles you can do it by overriding default style.js files. For example, if you want to override style first you have to find stylesheet id for this file:

https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.js#L4

In this case it is stylesheet.calendar.header. Next you can add overriding stylesheet to your theme with this id.

https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.js#L56

 theme={{
      arrowColor: 'white',
      'stylesheet.calendar.header': {
        week: {
          marginTop: 5,
          flexDirection: 'row',
          justifyContent: 'space-between'
        }
      }
    }}

Answer 2

if this doesn't work ,try this way

stylesheet: {
    calendar: {
      header: {
        week: {
          marginTop: 7,
          flexDirection: 'row',
          justifyContent: 'space-between',
        },
      }
    }
}