react-native-calendars: CalendarList rendering super slow

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.

This is issue is not in any way stale and it’s a major pitfall when using this library.

There is also a major problem using the Agenda component since it cannot be rendered consistently without the actual layout. If you try pre rendering the agenda in a non lazy tab navigator the Agenda week will be out of place. This means that I cannot load the Agenda page on app load but only when the user switches to that particular tab, resulting in the waiting time discussed above. It seems to me that no workaround is really feasible in this situation, any ideas are more than welcome.

I’m having terrible performance issue with ExpandableCalendar. Particularly when selecting different date or month. Has anyone found a solution to this?

Still having performance issue with ExpandableCalendar in android. Any news about this?

I’m facing the same issue.

I am using it with CalendarList, extremely slow on both ios and android

I was having performance issues as well and decided to use react-native-calendario because of the way its implemented and I only needed the CalendarList with no performance hit

@callaars How can a component like this be so slow? Thanks for your hint but in my oppinion this is a very critical issue for a basic calender like this (I know it also supports way more complex features). A component containing arround 40 text views just cannot be that slow. This seems like major performance issues or any bug

Same issue here. It works fine on iOS but rendering the calendar on Android is really really slow

Hi, i would like to share my approach here… To anticipate load time issues, I initialized my screen with some lighter component like ActivityIndicator and as soon as the screen get rendered, I replace ActivityIndicator with CalendarList. To achieve this you can use a combination of useState() with true as init value, then set state to false inside useEffect().

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
     setIsLoading(false)
}, [])

if(loading) {
return <ActivityIndicator />
else {
return <CalendarView />
}

@callaars I tried you solution without success. The issue for me is only on Android, iOS is fine. I even tried to have the Calendar without any markedDates very basic and it still takes 2-3s to open. On iOS it’s instant.