React-native-calendars: Changing state on onVisibleMonthChange in CalendarList

[FranciscoSimaoPerez]

I had an issue that when I used setState on onVisibleMonthsChange the previous and future months would get invisible and only showed the month name and the year.

To fix this problem I added this on index.js of CalendarList:

On contructor:
this.scrollTimeout = undefined;

On onViewableItemsChanged:
Before:

if (this.props.onVisibleMonthsChange) {
      this.props.onVisibleMonthsChange(visibleMonths);
}

After:

if (this.props.onVisibleMonthsChange) {
      clearTimeout(this.scrollTimeout);
      this.scrollTimeout = setTimeout(() => {
          this.props.onVisibleMonthsChange(visibleMonths);
      }, 200);
}

I hope this help anyone with the same problem

[Jojr]

Thank you! This solve my problem.

[scaralfred]

Thanks!!!

[sebzinck]

No need to change the package source code, simply do this

InteractionManager.runAfterInteractions(() => {
    this.setState()
})

[TaiPhamDuc]

No need to change the package source code, simply do this

InteractionManager.runAfterInteractions(() => {
    this.setState()
})

Thanks @sebzinck it works for me
onVisibleMonthsChange={this.onMonthChange}
....
onMonthChange = data => { InteractionManager.runAfterInteractions(() => { this.setState({ isLoading: true, planList: [], markerList: {}, // Your state }); }); };

[jcgb15]

I also have this problem I tried to use InteractionManager.runAfterInteractions but is it not working for me :(

[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.

[wbijen]

It would be great if this was included in the example code or be fixed in the source.

[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.