react-native-calendars: Calendar opens slower in android

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: └── react-native-calendars@1.19.4
  • npm ls react-native: └── react-native@0.55.4

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>

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 15
  • Comments: 20 (1 by maintainers)

Commits related to this issue

Most upvoted comments

Does not work, it is still very slow

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