React-native-calendars: Calendar opens slower in android

[debugpai]

Description

Calendar is opening really slowly in android. We're resorting to wrapping it in a view with an onLayout handler and showing a loader for the calendar which is giving a really bad experience for our users

Expected Behavior

Calendar should open without any delay

Observed Behavior

Calendar takes 1-2 seconds to open. This only happens on android devices

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars:
  └── [email protected]
• npm ls react-native:
  └── [email protected]

Also specify:

1. Phone/emulator/simulator & version:
   Simulator - Nexus 5X

Reproducible Demo

<CalendarList
    disableMonthChange={true}
    pastScrollRange={0}
    futureScrollRange={6}
    scrollEnabled={false}
    horizontal={true}
    pagingEnabled={true}
    showScrollIndicator={true}
    markedDates={...}
    onDayPress={x => x}
    onDayLongPress={x => x}
  />

To show the loader we can wrap it in

<View onLayout={e => this.setState({ layout: e.nativeEvent.layout })}>
    {this.state.layout ? <CalendarList {...params} /> : <ActivityIndicator />}
</View>

[debugpai]

I'm trying to debug the problem using react-native-slowlog and its the renderWeek function in src/calendar/index.js that is taking so long to render. It takes anywhere between 17ms to 25ms to render and it causing Calendar.render to load at >100ms

[debugpai]

Okay after adding the initialNumToRender prop the performance significantly improved. Raised a PR. Please check it

[RafaelKr]

I can confirm this leads to a significant increased performance on my Samsung Galaxy S7. Thanks!

[debugpai]

bump can someone please look at this? I updated a comment on the PR

[tautvilas]

updated PR with my comment

[kuangyliang]

Does not work, it is still very slow

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

[maxammann]

If I switch to the tab which renders the calendarlist the first time, then the frame rate drops significantly. Is there a workaround?

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

[carloslibardo]

I'm facing the same issue

[mleister97]

CalendarList is still very slow!