CalendarList is not rendering the past months and the ones after January 2019

[martinshhh]

Description

I have an <Agenda /> and when I open CalendarList it is not rendering the past months and the ones after January 2019. I can scroll but all it shows is a blank screen.
I also tried to define the <CalendarList /> without the agenda but the behaviour is the same.

Expected Behavior

To render every past month and the future ones

Agenda definition

             <Agenda
                    items={this.items}
                    // current={this.state.selectedDay}
                    loadItemsForMonth={this.loadItems.bind(this)}
                    //selected={'2017-05-16'}
                    ref={(agenda) => { this.agenda = agenda; }}
                    renderItem={this.renderItem.bind(this)}
                    renderEmptyDate={this.renderEmptyDate.bind(this)}
                    rowHasChanged={this.rowHasChanged.bind(this)}
                    onCalendarToggled={this.onCalendarToggled.bind(this)}
                    onDayChange={this.onDayChange.bind(this)}
                    onDayPress={this.onDayPress.bind(this)}
                    theme={{
                        height: 300,
                        selectedDayBackgroundColor: '#42B5A0',
                        textDayFontSize: 20,
                        arrowColor: 'black',
                        monthTextColor: 'black',
                        textMonthFontSize: 25,
                        textDayHeaderFontSize: 14,
                        textSectionTitleColor: '#42B5A0',
                        agendaKnobColor: '#42B5A0',
                        agendaKnobSize: 12,
                        'stylesheet.agenda.main': {
                            knobContainer: {
                                flex: 1,
                                position: 'absolute',
                                left: 0,
                                right: 0,
                                height: 19,
                                bottom: 0,
                                alignItems: 'center',
                            }
                        }
                    }}
                />

Environment

Android/iOS

[anoopmm]

@xMaarf same issue here, did you get any solutions?

[martinshhh]

@anoopmm Nop, nothing yet.
Does it shows from April 2018 to January 2019?

[anoopmm]

@xMaarf yes same

[anoopmm]

are you using react-navigation ?

[martinshhh]

Yes and no, router-flux. Already tried to downgrade and everything but I get the same result.

[anoopmm]

in my case it is working perfectly out side tab navigation (react-navigation). issue is inside tab navigation.

[martinshhh]

@anoopmm same for me. If I use it in a component that is not defined in my router, it works fine.
Have you found any workaround for this?

[tigo0]

It seems like the issue is with initialScrollIndex and initialNumToRender that is 10 by default (I think). I managed to fix it by setting the initialNumToRender to the amount of months past + present and manually scrolling to the correct index after the component has been mounted.

  componentDidMount() {
      requestAnimationFrame(() => {
        this.listView.scrollToIndex({animated: false, index: this.getMonthIndex(this.state.openDate)});
      });
  }

  render() {
    return (
      <FlatList
        ref={c => this.listView = c}
        initialNumToRender={this.futureScrollRange + this.pastScrollRange + 1}
        ...CalendarListProps
      />
    );
  }

[chrismllr]

@xMaarf Can you test out the fix at #474 to see if it fixes your issue? This looks like the exact issue I saw when I created it.

[MrHazimAli]

@chrismllr @tautvilas removing intialScrollIndex did not solve the problem.. still calendarList not showing date of month after january 2019 and past months. any solutions for this ?

[Ravim-addweb]

Any solutions for this yet?

[m00gl3]

Other than using #474 to fix this issue (manually) - is there any update on when this will be merged to the next version?

[damikdk]

I use horizontal CalendarList and got the same issue. Custom style was the problem:

theme={{
  'stylesheet.calendar.header': {
    header: { height: 0 },
  },
}}

delete this stylesheet.calendar.header solved it for me

UPD: sike. Months renders only on arrow press, but disappear on swipe :(

[nathsimpson]

I had a similar issue happen to me recently in an expo project. I solved it by updating the Expo SDK to the latest versions :)