Skip to content

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

@amebarki

Description

@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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions