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}}
/>
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'
}
}
}}