WeekCalendar flashing

[LucasReinaldo]

Description

I am building a component that shows/hides the calendar week triggered by the user onPress on calendar icon, as you can see, the WeekCalendar takes a while to render the days. I have tested both styled and straight from the example in the docs. I removed a few bouncing properties, animations and had no success. Keeps flashing. I also tried older versions, no success.

Expected Behavior

WeekCalendar component to render at the same time as the component. No animations or delay.

Environment

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

• npm ls react-native-calendars: react-native-calendars@1.1295.0

• npm ls react-native:

react-native-calendars@1.1295.0 │ └─┬ recyclerlistview@3.0.5 │ └── react-native@0.71.4

Also specify:

1. Device/emulator/simulator & OS version: iPhone 13 iOS 15.4

Reproducible Demo

    <CalendarProvider
      date={date}
      onDateChanged={onDateChanged}
      style={{
        flex: 0,
        marginBottom: 14,
      }}>
      {calendarOpen && (
        <Animated.View>
          <WeekCalendar
            disableAllTouchEventsForDisabledDays
            animateScroll={false}
            allowSelectionOutOfRange={false}
            allowShadow={false}
            maxDate={format(new Date(), 'YYYY-MM-DD')}
            //
            bounces={false}
            bouncesZoom={false}
            alwaysBounceHorizontal={false}
            alwaysBounceVertical={false}
            //
          />
          <Text style={{ color: 'white', textAlign: 'center' }}>
            {weekDate}
          </Text>
        </Animated.View>
      )}
    </CalendarProvider>

Screenshots

https://user-images.githubusercontent.com/26369276/231868760-4a7c883d-1afc-4a26-86b6-58de98f9b313.mp4

[froggydisk]

The very same issue happens to me too.

In my opinion, there are too many pages rendered in advance. WeekCalendar uses InfiniteList, which is RecyclerListView. (You can check the detail of RecyclerListView from here) And it is recommended keeping the renderAheadOffset as low due to the high computing cost. So, go to node_modules/react-native-calendars/src/infinite-list/index.js and change the setting of RecyclerListView.

It should be look like this.

<RecyclerListView 
ref={listRef} 
isHorizontal={isHorizontal} 
... 
renderAheadOffset={0 * pageWidth}   // <- here is the change! I changed the number from 5 to 0
.../>

Hope this is what you want 😁

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