React-native-calendars: state update is preventing the CalendarList rendering

[Yandamuri]

Description

When month is changed, onVisibleMonthsChangeis triggered where I am doing the data fetching. Since Data fetching is an asynchronous operation i tried to render a spinner with state update. This is where problem starts. This state update is preventing the CalendarList rendering, Instead rendering only Month and Year.

Expected Behavior

Calendar should render as shown below

Observed Behavior

But it's rendering like this,

Environment

[email protected]
[email protected]

It's happening in both emulator and device.

Please have a look at my code,

 <CalendarList
    ref={ref => this.calendarRef = ref}
    horizontal={true}
    pagingEnabled={true}
    hideArrows={false}
    onPressArrowLeft={() => this.onArrowPress('left')}
    onPressArrowRight={() => this.onArrowPress('right')}
    onVisibleMonthsChange={months => this.onSwipeMonths(months)}
/>

onSwipeMonths(months) {
            this.setState({loaderflag: true})  // this line causes the above mentioned issue
    let { month, dateString } = months[0];
    if (months.length == 1 && this.state.calendarDate.getMonth() != (month - 1)) {
        let selectedMonth = new Date(dateString);
        this.getCalendarData(selectedMonth);
    }   
}

[Xiltyn]

I'm experiencing the very same issue. Whenever I use this.setState() on onVisibleMonthsChange, it fails to render months more than 1 apart from the initial one.

Actually, solution from https://github.com/wix/react-native-calendars/issues/884 helped with this one. I can see that it has already been commited to the master branch but it doesn't seem to be included in any release yet.

Can somebody maybe clarify, if there are plans to make a new release soon by any chance?

[Yandamuri]

@Xiltyn Glad to know that there is a solution for this issue. BTW, the link you mentioned above pointing to the same issue. Did you meant to refer any other link?

[Inbal-Tish]

@Yandamuri This is the link for the issue with the solution: https://github.com/wix/react-native-calendars/issues/884

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.