react-native-calendars: CalenderList in Agenda component doesn't show / render current week until scroll or choosing another date

Description

On initial load of the Agenda component the CalendarList component on top doesn’t show until I scroll the items rendered below in the scrollview or after opening the CalendarList via the knob and manually selecting a date. Important to mention this happened only in iOS devices and it happened to the included Agenda example too (https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agenda.js).

Expected Behavior

The CalendarList should show the week of the current selected date without user interaction on initial load

Observed Behavior

The CalendarList doesn’t show at all until user interacts. Observed only in iOS.

Environment

react-native-calendars@1.17.4:
react-native-cli: 2.0.1:
react-native: 0.49.3:

iOS Simulator iPhone 6:
iPhone’s 7, X:

Screenshot

simulator screen shot - iphone 6 - 2018-03-27 at 19 32 30

Thanks.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 22 (3 by maintainers)

Most upvoted comments

in file /src/calender-list/index.js I wrapped the body of scrollToDay (line 70) function inside a settimeout, and it works ilke a charm in both ios and android:

scrollToDay(d, offset, animated) { setTimeout(() => {

  const day = parseDate(d);
  const diffMonths = Math.round(this.state.openDate.clone().setDate(1).diffMonths(day.clone().setDate(1)));
  let scrollAmount = (calendarHeight * this.pastScrollRange) + (diffMonths * calendarHeight) + (offset || 0);
  let week = 0;
  const days = dateutils.page(day, this.props.firstDay);
  for (let i = 0; i < days.length; i++) {
    week = Math.floor(i / 7);
    if (dateutils.sameDate(days[i], day)) {
      scrollAmount += 46 * week;
      break;
    }
  }
  this.listView.scrollToOffset({offset: scrollAmount, animated});
}, 10);

}

miladi7 on Apr 13, 2018

Still reproduced

whalemare on Sep 30, 2019

Hi Now it started giving me red screen with “Can’t find variable: calendarHeight”, maybe because of this hack? The app crashes. Thanks.

dhcmega on Apr 25, 2018

Hi I have the same problem, I thought is was based on an element above it with a dynamic height, that pushed down the “frame” of the day selection, but the content remained at its original position. Is there a way to trigger a redraw? Thanks.

EDIT: the temporary solution of the timeout worked for me. thanks.

dhcmega on Apr 18, 2018