Delay when using WeekCalendar and AgendaList together.

[aleberguer]

Description

Hello! I’m using the CalendarProvider to show a page with a WeekCalendar and an AgendaList working together. Everything looks good except for a delay when tapping on a day in the WeekCalendar. I’m attaching a video with this issue.

I was digging into the code, and I found that there is a debounce of 1 second in the scrollToSection function that is causing this delay. I tried to remove the debounce, and the delay is gone.

I'm not sure why this debounce is there, but maybe we can add a prop to decide whether to use the debounce or not?

Expected Behavior

When tapping a day in the WeekCalendar, the AgendaList scrolls immediately, and there is no noticeable delay between the tap in WeekCalendar and the scrolling.

Observed Behavior

When tapping a day in the WeekCalendar, there is a delay in scrolling the AgendaList to the day selected.

Environment

react-native-calendars@1.1289.0
react-native@0.65.2

This is happening on both iOS/Android emulators and physical devices.

Reproducible Demo

 <CalendarProvider date="2022-01-07">
        <WeekCalendar hideDayNames firstDay={1} />
        <AgendaList
          sections={ITEMS}
          renderItem={CardItem}
          horizontal
          pagingEnabled
        />
</CalendarProvider>

Video

Screen.Recording.2023-03-21.at.13.59.15.mov

[brianjuhl]

Also experiencing this but when I remove the debounce the delay seems to persist for some reason. Have used patch package, removed node_modules, cleared expo cache, etc etc.

[aleberguer]

I removed the debounce and it works smoothly. @brianjuhl Have you tried changing directly in the node_modules package?

[aleberguer]

@Inbal-Tish, what are your thoughts on this issue?
I can work on making a PR, but I would like to know the best approach here. I don't know what the debounce is expected to solve, but it is making the calendar very laggy and not the best user experience.

Can we add a prop to the AgendaList to decide whether to use the debounce?
Or maybe a prop to give the debounce time, 1000 seems pretty arbitrary here.

[Inbal-Tish]

@aleberguer Hi. PR will be best. I would add a prop to control the debounce time.

[stale]

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.

[zkteco-home]

same issue

[juanmigdr]

Hey, I have had the same issue and created this patch which works as a temporary fix until the team creates a PR:

react-native-calendars+1.1307.0.patch

PS: You can apply the patch making use of patch-package