react-native-calendars icon indicating copy to clipboard operation
react-native-calendars copied to clipboard

Past Months not rendering in Agenda

Open chrismllr opened this issue 7 years ago • 5 comments

Description

Past months are not being rendered in the Agenda view.

Usage:

<Agenda
  ref={agenda => {
    this.agenda = agenda;
  }}
  theme={calendarTheme(this.props.theme)}
  items={this.props.upcomingMeetingsMap}
  loadItemsForMonth={this._loadForMonth}
  renderItem={this.renderMeetingItem}
  renderDay={this.renderDay}
  renderEmptyData={this.renderNoResults}
  rowHasChanged={this._rowHasChanged}
/>

Expected Behavior

Expected: Scrolling up after toggling CalendarList should show previous months

Observed Behavior

Actual: No months rendered. I've dug a little into it, And i'd at least expect the texts to be rendered (the text interpretations of the not-yet-rendered Calendar components) But even those are not being rendered through the FlatList.

If there's an error message, please paste the full terminal output and error message in this code block: No error message reported.

Environment

Please run these commands in the project folder and fill in their results:

  • npm ls react-native-calendars:
└── [email protected]
  • npm ls react-native:
└── [email protected]

Also specify:

  1. Phone/emulator/simulator & version: iPhone X - iOS 11.3

Reproducible Demo

Open Calendar list - scroll up calendar-bug

chrismllr avatar Apr 26 '18 20:04 chrismllr

This looks to be an issue with using getItemLayout, and using the deprecated API initialListSize on the FlatList within calendar-list. The CalendarList only ever loads 10 items, and does not re-load more items as you scroll.

I was able to find an issue that explains it here: https://github.com/facebook/react-native/issues/15734

Removing getItemLayout and changing initialListSize to initialNumToRender fixes the issue, but breaks the logic within onViewableItemsChanged (loading the calendars as you scroll). I am not sure what removing getItemLayout does for performance, it would be great to have some maintainer insight here.

chrismllr avatar May 01 '18 14:05 chrismllr

I have put out a PR to resolve this issue, referenced above.

chrismllr avatar May 01 '18 17:05 chrismllr

This issue is a dupe of #425

chrismllr avatar May 02 '18 22:05 chrismllr

@chrismllr Could you provide with exact code snippet to reproduce the problem? The snippet in your bug description has external functions which are not defined

tautvilas avatar May 10 '18 11:05 tautvilas

I've had the same problem in iOS - the calendar list is blank above the current month. Problem doesn't appear in Android. As I don't need a large range (and thanks to chrismllr highlighting the cause) I was able to temporarily solve it by setting pastScrollRange and futureScrollRange to a maximum total range of 10 months. Would be great not to need to though

MorganIsBatman avatar May 30 '18 20:05 MorganIsBatman