WeekCalendar: scrollToIndex fails after data regeneration, causing calendar to jump to wrong dates when scrolling backwards

[amebarki]

Description

When using WeekCalendar in an ExpandableCalendar and scrolling backwards (towards the past), the calendar jumps to the wrong date after regenerating the data array. The scrollToIndex call after data regeneration doesn't work as expected, causing the FlatList to display index 0 instead of the intended index.

az_recorder_20260210_144040.mp4

Steps to Reproduce

1. Use ExpandableCalendar with WeekCalendar enabled
2. Swipe left repeatedly to scroll backwards towards the past
3. When reaching the first item (index 0), observe the calendar jump to a completely different month

Additional Context

After the jump, the pattern repeats - scrolling to October triggers another regeneration that jumps to July, creating an unusable backward scrolling experience.

Expected Behavior

When scrolling backwards and reaching the edge of the list:

1. User continues scrolling backwards seamlessly

Observed Behavior

The calendar jumps several weeks/months backwards instead of staying at the current date.

Detailed flow from logs:

1. User scrolls to 2025-12-29 (index 0)
2. onEndReached fires with direction: start
3. New dates generated: ["2025-10-06", ..., "2025-12-29"] (index 12)
4. Code calls scrollToIndex({index: 12}) to show 2025-12-29
5. ❌ BUG: FlatList shows 2025-10-06 (index 0) instead of index 12
6. Calendar jumps from December to October (skipping November)

Full logs showing the issue:
LOG onViewableItemsChanged
LOG {"viewableItems": [{"index": 0, "isViewable": true, "item": "2025-12-29", "key": "2025-12-29-0"}, {"index": 1, "isViewable": true, "item": "2026-01-05", "key": "2026-01-05-1"}]}
LOG onViewableItemsChanged - newDate: 2025-12-29 visibleWeek.current: 2026-01-05
LOG currItems[0]: 2025-12-29 currItems.length: 13
LOG Updated visibleWeek.current to: 2025-12-29 currentIndex: 0
LOG Calling onEndReached - reached first item (currItems[0]: 2025-12-29 )
LOG End reached - direction: start visibleWeek.current: 2025-12-29
LOG End reached - currentIndex.current: 0
LOG End reached - baseDate: 2025-11-17 new items: ["2025-10-06", "2025-10-13", "2025-10-20", "2025-10-27", "2025-11-03", "2025-11-10", "2025-11-17", "2025-11-24", "2025-12-01", "2025-12-08", "2025-12-15", "2025-12-22", "2025-12-29"]
LOG End reached - scrolling to index: 12
LOG onViewableItemsChanged
LOG {"viewableItems": [{"index": 0, "isViewable": true, "item": "2025-10-06", "key": "2025-10-06-0"}, {"index": 1, "isViewable": true, "item": "2025-10-13", "key": "2025-10-13-1"}]}
LOG onViewableItemsChanged
LOG {"viewableItems": [{"index": 0, "isViewable": true, "item": "2025-10-06", "key": "2025-10-06-0"}]}
LOG onViewableItemsChanged - newDate: 2025-10-06 visibleWeek.current: 2025-12-29
LOG currItems[0]: 2025-10-06 currItems.length: 13
LOG Updated visibleWeek.current to: 2025-10-06 currentIndex: 0
LOG Calling onEndReached - reached first item (currItems[0]: 2025-10-06 )
LOG End reached - direction: start visibleWeek.current: 2025-10-06
LOG End reached - currentIndex.current: 0
LOG End reached - baseDate: 2025-08-25 new items: ["2025-07-14", "2025-07-21", "2025-07-28", "2025-08-04", "2025-08-11", "2025-08-18", "2025-08-25", "2025-09-01", "2025-09-08", "2025-09-15", "2025-09-22", "2025-09-29", "2025-10-06"]
LOG End reached - scrolling to index: 12
LOG onViewableItemsChanged
LOG {"viewableItems": [{"index": 0, "isViewable": true, "item": "2025-07-14", "key": "2025-07-14-0"}]}
LOG onViewableItemsChanged
LOG {"viewableItems": []}
LOG onViewableItemsChanged
LOG {"viewableItems": [{"index": 12, "isViewable": true, "item": "2025-10-06", "key": "2025-10-06-12"}]}
LOG onViewableItemsChanged - newDate: 2025-10-06 visibleWeek.current: 2025-10-06
LOG currItems[0]: 2025-07-14 currItems.length: 13

Environment

react-native-calendars version: 1.22.0
react-native version: 0.73.11
Platform: Android/iOS (both affected)

[carlbleick]

i think i was having a similar problem and fixed it like this:

diff --git a/src/expandableCalendar/WeekCalendar/index.js b/src/expandableCalendar/WeekCalendar/index.js
index 8aa5ea86c1ed9a4f962be30812694fd944264718..db8a9849358ff067c8f8bd5f8fe2294c31eab7fe 100644
--- a/src/expandableCalendar/WeekCalendar/index.js
+++ b/src/expandableCalendar/WeekCalendar/index.js
@@ -1,5 +1,5 @@
 import XDate from 'xdate';
-import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FlatList, View } from 'react-native';
 import { sameWeek, onSameDateRange, getWeekDates } from '../../dateutils';
 import { toMarkingFormat } from '../../interface';
@@ -28,6 +28,7 @@ const WeekCalendar = (props) => {
     const style = useRef(styleConstructor(theme));
     const items = useRef(getDatesArray(current ?? date, firstDay, numberOfDays));
     const [listData, setListData] = useState(items.current);
+    const pendingScrollAfterEndReached = useRef(false);
     const changedItems = useRef(constants.isRTL);
     const list = useRef(null);
     const currentIndex = useRef(NUMBER_OF_PAGES);
@@ -119,8 +120,16 @@ const WeekCalendar = (props) => {
         items.current = (getDatesArray(visibleWeek.current, firstDay, numberOfDays));
         setListData(items.current);
         currentIndex.current = NUMBER_OF_PAGES;
-        list?.current?.scrollToIndex({ index: NUMBER_OF_PAGES, animated: false });
+        pendingScrollAfterEndReached.current = true;
     }, [firstDay, numberOfDays]);
+    // Set list index before repaint after the end reached and and list data got replaced.
+    // This prevents a short flicker where the new list data with old index was shown. 
+    useLayoutEffect(()=>{
+        if (pendingScrollAfterEndReached.current) {
+            list?.current?.scrollToIndex({ index: NUMBER_OF_PAGES, animated: false });
+            pendingScrollAfterEndReached.current = false;
+        }
+    },[listData])
     const onViewableItemsChanged = useCallback(({ viewableItems }) => {
         if (changedItems.current || viewableItems.length === 0) {
             changedItems.current = false;