React-native-calendars: Invisible Past Calendars in <CalendarList />

[dk0r]

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

• [email protected]
• [email protected]
• Emulated Pixel XL on [email protected]

Reproducible Demo

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

[tautvilas]

Do you get invisible calendars in official example too? If not, what kind of navigation solution are you using in your app? What is the containing element for CalendarsList?

[dk0r]

Issue closed: Was unable to debug this issue. Reverted my project to a previous commit which seems to have eliminated the problem. Going to assume this was caused by user error. Will reopen if it occurs again and I can isolate the cause.

@tautvilas Do you get invisible calendars in official example too?

No. I ran the official example and also init'd a new react-native project (grabbing react-native-calendars from npm). In both cases, <CalendarList/> worked properly and visibly displayed all past calendars.

@tautvilas If not, what kind of navigation solution are you using in your app?

I'm using <TabNavigator/> from [email protected]

@tautvilas What is the containing element for CalendarsList?

<TabNavigator> (from [email protected])
   <DrawerLayout> (from [email protected])
      <View> (a custom component with several other imports)
         <CalendarList> (from [email protected])

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

I am also getting this issue, without any animation! But I am struggling to reproduce this in a new project.

[abrantes01]

Mhhhm.. Facing the same issue with react-native 0.52.2

[victorwvieira]

Same issue here... Does anyone have the solution?

[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

[anoopmm]

same issue here

[tiagodprovenzano]

Was suffering from the same error, in my case an activityIndicator animation was preventing the component from rendering.