FlatList render issue

[farm16]

Description

When using FlatLists in react-native-calendars, the handling of these lists appears to be incorrect, leading to unexpected behavior.

Expected Behavior

The calendar should provide a seamless transition between months and weeks without any noticeable UI delays.

Observed Behavior

Initially, I suspected that the issue might be related to the data I was passing to the AgendaList component. However, even after using a small dummy dataset, I encountered the following error message along with multiple UI delays.

 VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 4875, "dt": 4739, "prevDt": 5382}

Environment

└─ react-native-calendars@1.1299.0

└─ react-native@0.71.10

system:

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 10.48 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - /opt/homebrew/opt/node@18/bin/npm
    Watchman: 2023.05.22.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/chris/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK:
      API Levels: 23, 26, 27, 28, 29, 30, 31, 33
      Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0
      System Images: android-28 | ARM 64 v8a, android-29 | ARM 64 v8a, android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play ARM 64 v8a, android-30 | ARM 64 v8a, android-30 | Google APIs ARM 64 v8a, android-30 | Google Play ARM 64 v8a, android-31 | Google Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.9971841
    Xcode: 14.3/14E222b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16.1-ea - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 10.2.2 => 10.2.2 
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.10 => 0.71.10 
    react-native-macos: Not Found

Reproducible Demo

To reproduce the issue, follow these steps:

1. Navigate to a screen or component where the CalendarList or WeekCalendar is rendered.
2. Scroll horizontally within the CalendarList or WeekCalendar component.
3. While scrolling, observe that the issue occurs intermittently or consistently.

Screenshots

[juniordeleon013]

I have the same issue, any update from this?

[reft]

same.. also sometimes when you use calendarRef.current?.scrollToDay the page/month changes but all the days are blank...

[mamedia-edv]

+1

[738]

+1

[vincecoleman]

+1

[oguzydz]

same issue, any update?

[asevims]

+1

[zkteco-home]

same issue +1

react-native-calendars 1.1301.0

[zkteco-home]

any update?

[MissingCorner-HaoPhan]

I have same issue

[smallmachines-hyunho]

same issue here too...

[javigutierrezfer]

Is there any idea of when it will be solved?

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

[billvog]

+1

[HoSeopLee]

+1