Invisible Past Calendars in <CalendarList />

Description

When using the <CalendarList/> example code, scrolling to the past results in blank/empty spots where past calendars should be. These ‘invisible calendars’ are annotated in the graphic below. They’re also shown in the following gif: https://i.imgur.com/Z8eNbtk.gif

Expected Behavior

Upon scrolling to the past, I expect to see past calendars (not blank-spots). Per the docs, we should see 50 past calendars by default (or however many are set via the pastScrollingRange prop).

Observed Behavior

In the following gif, <CalendarList/> is being scrolled to past and future. Blank-spots can be seen appearing where past months (August 2017, July 2017, June 2017, etc…) should be: https://i.imgur.com/Z8eNbtk.gif

Explicitly setting the pastScrollRange={....} prop does not alleviate this issue and only limits the number of blank-spots which are present.

Environment

• react-native-calendars@1.6.2
• react-native@0.48.3
• Emulated Pixel XL on android@8.0.0

Reproducible Demo

See the official use case example: https://github.com/wix/react-native-calendars#calendarlist

[SpongeBobSun]

Just solved a similar issue.

For those who suffered the same issue, please check whether your animation is blocking the main thread, which will result in the scrollview stop rendering. Try to put your animation block in InteractionManager.runAfterInteractions

[jsaguiar]

@waisbek take a look to your animations, specify Infinite loops.

When an animation is running, it can prevent VirtualizedList components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use isInteraction: false in your animation’s config to prevent this issue. https://facebook.github.io/react-native/docs/animations.html