Calendar doesn't respect its height

Hi There, I am using the calendar in my app, I am setting the height on its style as the doc shows, but it doesn’t seem to get it applied.

Expected Behavior

What action did you perform, and what did you expect to happen? I set Calendar height, border and etc on ‘style’ prop. I expected that when playing with height on style prop, it would affect numbers container and fit them into the previous height.

What actually happened when you performed the above actions? It doesn’t respect the defined height on smaller resolution, such as iphone SE. Have changed the height multiple times, it changes the height of the are with gray border, but the numbers container doesn’t have its height affected. (see on attached screenshot)

Environment

• npm ls react-native-calendars: react-native-calendars@1.1249.0
• npm ls react-native: react-native@0.63.4

Also specify:

1. Phone/emulator/simulator & version: iphone SE (2nd generation), nexus One and Pixel_3a.

Reproducible Demo

<SafeAreaView>
            <Calendar
                // Specify style for calendar container element. Default = {}
                style={{
                    borderWidth: 5,
                    borderColor: 'gray',
                    height: 100
                }}
                // Specify theme properties to override specific styles for calendar parts. Default = {}
                theme={{
                    backgroundColor: '#ffffff',
                    calendarBackground: '#ffffff',
                    textSectionTitleColor: '#b6c1cd',
                    textSectionTitleDisabledColor: '#d9e1e8',
                    selectedDayBackgroundColor: '#00adf5',
                    selectedDayTextColor: '#ffffff',
                    todayTextColor: '#00adf5',
                    dayTextColor: '#2d4150',
                    textDisabledColor: '#d9e1e8',
                    dotColor: '#00adf5',
                    selectedDotColor: '#ffffff',
                    arrowColor: 'orange',
                    disabledArrowColor: '#d9e1e8',
                    monthTextColor: 'blue',
                    indicatorColor: 'blue',
                    textDayFontFamily: 'Montserrat-Bold',
                    textMonthFontFamily: 'Montserrat-Bold',
                    textDayHeaderFontFamily: 'Montserrat-Bold',
                    textDayFontWeight: '300',
                    textMonthFontWeight: 'bold',
                    textDayHeaderFontWeight: '300',
                    textDayFontSize: 16,
                    textMonthFontSize: 16,
                    textDayHeaderFontSize: 16
                }}
                />
        </SafeAreaView>

[sperardt]

Found the solution.

I needed to override a couple of styles on the following files: https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/period/style.js

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

Basically, on header needed to reduce the font size. If using period, you also will need to play with fontSizes and period height because it is hardcoded on 34.

[DavidInojosa]

same issue here