in Agenda firstDay is not propagated to CalendarList

[linaia]

trafficstars

Description

We noticed that the header and Calendar are not in sync when firstDay is set to 1 (start on Monday)

When you scroll down, it starts on Sunday :

Expected Behavior

Same firstDay should be displayed.

Observed Behavior

Looking into agenda code, we can see that calendarListProps is empty despite firstDay is available in props

renderCalendarList() {
        const { markedDates, items } = this.props;
        const shouldHideExtraDays = this.state.calendarScrollable ? this.props.hideExtraDays : false;
        const calendarListProps = extractComponentProps(CalendarList, this.props);
        console.log("DEBUG calendarListProps", calendarListProps, this.props);
        return (<CalendarList {...calendarListProps} ref={this.calendar} current={getCalendarDateString(this.currentMonth.toString())} markedDates={this.generateMarkings(this.state.selectedDay, markedDates, items)} calendarWidth={this.viewWidth} scrollEnabled={this.state.calendarScrollable} hideExtraDays={shouldHideExtraDays} onLayout={this.onCalendarListLayout} onDayPress={this.onDayPress} onVisibleMonthsChange={this.onVisibleMonthsChange}/>);
    }

DEBUG calendarListProps {} {"firstDay": 1, "items": ....

If we force the props firstDay, it works fine

return (<CalendarList {...calendarListProps} firstDay={this.props.firstDay} 

So the problem is in extractComponentProps or in CalendarList props.... :

export function extractComponentProps(component, props, ignoreProps) {
    const componentPropTypes = component.propTypes;
    console.log("DEBUG componentPropTypes", componentPropTypes, props);    

Result : no firstDay in componentPropTypes

DEBUG componentPropTypes {"date": [Function bound checkType], "item": [Function bound checkType], "renderDay": [Function bound checkType], "renderEmptyDate": [Function bound checkType], "renderItem": [Function bound checkType], "rowHasChanged": [Function bound checkType], "theme": [Function bound checkType]}
 {"items": ....

Why ? we can see that the extends on props of CalendarList seems not working well ....

export interface CalendarListProps extends CalendarProps

As firstDay in visible in CalendarProps but not in CalendarListProps

export interface CalendarProps extends CalendarHeaderProps, DayProps {
    /** Specify theme properties to override specific styles for calendar parts */
    theme?: Theme;
    /** If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday */
    firstDay?: number;

Question : does "component.propTypes" get the propTypes defined in interface or get the old way of propTypes in a Component (https://reactjs.org/docs/typechecking-with-proptypes.html) ?

Now it is your turn .... @yuvalsho can you please have a look ?

Environment

"expo": "^46.0.10", "react-native": "0.69.5", "react-native-calendars": "^1.1288.3",

[Inbal-Tish]

@linaia Hi. Thank you for reporting the issue. This issue was already fixed, see: https://github.com/wix/react-native-calendars/releases/tag/1.1289.0. Please update the Calendars version to latest one

[igorschlum]

@linaia , could you test and close the issu if it is fixed? Best

[linaia]

Yes it is solved updating at least with 1.1289.0 (current used in package.json is 1.1290.0)