`CalendarProvider` date prop not changing `AgendaList` date

[KrisLau]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

I'm trying to get the date prop to work for my react-native-calendar and the date didn't change for the initial render and even when I call the setState in the onDayPress. Also pressing the today button doesn't seem to work either? in the picture I hardcode the date prop but i usually have the selectedDay state there. Just did that to test

Expected Behavior

Clicking on a date in the ExpandableCalendar should scroll to selected date in AgendaList

Observed Behavior

it only changes the date in the ExpandableCalendar but not in the AgendaList.

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:

├─┬ @notifee/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-async-storage/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-clipboard/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-firebase/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-google-signin/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-masked-view/[email protected]
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ ├─┬ @react-navigation/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├─┬ @rneui/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ @sentry/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected] invalid: "^3.1.9" from node_modules/@rneui/base
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
  └─┬ @react-native-community/[email protected]
    └── [email protected] deduped

Also specify:

1. Device/emulator/simulator & OS version: iPhone 11 (13.6)

Reproducible Demo

function ExpandableCalendarAgenda(props) {
  ...
  return (
    <CalendarProvider
      date={selectedDay}
      showTodayButton={true}
      disabledOpacity={0.6}
      todayBottomMargin={16}
      onDateChanged={date => setSelectedDay(date)}
      theme={{
        todayButtonTextColor: Colors.WHITE,
      }}
      todayButtonStyle={styles.todayButton}>
      {props.currentScreen === 'UserSchedule' && (
        <ExpandableCalendar
          theme={getTheme()}
          pastScrollRange={60}
          futureScrollRange={60}
          displayLoadingIndicator={true}
          disableAllTouchEventsForDisabledDays
          markedDates={getMarkedDates(eventOccurrencesFormatted)}
          minDate={format(sub(new Date(), {years: 4}), 'yyyy-MM-dd')}
          maxDate={format(add(new Date(), {years: 4}), 'yyyy-MM-dd')}
          onDayPress={({dateString}) => {
            setSelectedDay(dateString);
          }}
          calendarStyle={styles.calendar}
          style={{paddingTop: insets.top - 10}}
        />
      )}
      <AgendaList
        markToday={false}
        windowSize={5}
        scrollToNextEvent
        initialNumToRender={7}
        maxToRenderPerBatch={5}
        onEndReachedThreshold={0.1}
        removeClippedSubviews={false}
        updateCellsBatchingPeriod={30}
        sections={eventOccurrencesFormatted}
        renderItem={({item}) => (
          <EventListItem
            currentScreen={props.currentScreen}
            roles={props?.roles ?? []}
            item={item}
          />
        )}
        contentContainerStyle={{paddingBottom: 80}}
        sectionStyle={styles.section}
      />
    </CalendarProvider>
  );
}

Screenshots

[KrisLau]

@Inbal-Tish Related to #1862. I also tried logging stuff in the agendaList.js and it looks like the problem is in the scrollToSection where the sectionIndex is for some reason resolving to undefined.

EDIT: So I think part of the problem is that the agendaList is not re-rendering/updating the scroll index when the sections are updated. It also seems to be very inconsistent as I've tried closing, re-opening, and navigating to the calendar dozens of times and half the time it scrolls to the current day while the other half of the time, it does not.

Also the today button seems to be disabled all the time now?

[Inbal-Tish]

@KrisLau Hi. Please remove all selectedDay logic from CalendarProvider props (date and onDateChanged) and from ExpandableCalendar's onDayPress prop. The ExpandableCalendar and its context provider are managing the selection of the date internaly. You should only provide the INITIAL date to the provider's date prop.

[KrisLau]

@Inbal-Tish I just tried that and it still seems to stay on the same date. I feel like the selectedDay logic was working for me until I updated the package a while back but the problem is I have no idea when it stopped working since I only noticed the error recently

EDIT: Weird, I just put my selectedDay logic back in and it seems to work now. I'm so confused

[Inbal-Tish]

@KrisLau Did you try running our demo app to see if your bug reproduces there? I can't seem to do that or I'm not sure what the bug is - can you add a video maybe?

[KrisLau]

@Inbal-Tish Sorry for the super late reply! here's a video of my problem:

https://user-images.githubusercontent.com/46275463/191371294-a94b0ff8-edf6-40a7-bdfe-493a893635ef.mp4

In the video you can see the problem in this issue (clicking on a date not changing the date), calendar not defaulting to current date, as well as the performance issue I've been having from the beginning (VirtualizedList: You have a large list that is slow to update)

[KrisLau]

@Inbal-Tish Link to a comment I made awhile back with more info about the performance issue:

• https://github.com/wix/react-native-calendars/issues/1088#issuecomment-1068202765

[jslok]

I believe I am having the same issue. Selecting a date on the expanded calendar has no effect on the AgendaList. Seems to be an issue if the date is farther than the rendered window.

[KrisLau]

@Inbal-Tish Also getting Excessive pending callbacks (not every time but sometimes) and I noticed the expandableCalendar has an issue where if you expand it all the way, wait for a second, and try swipe it close, it refuses to move. The only way to close it is by pulling it down a little and then back up without lifting my finger.

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