react-native-calendars
react-native-calendars copied to clipboard
wix
CalendarList is not rendering the past months and the ones after January 2019
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 Nop, nothing yet. Does it shows from April 2018 to January 2019?
Yes and no, router-flux. Already tried to downgrade and everything but I get the same result.
in my case it is working perfectly out side tab navigation (react-navigation). issue is inside tab navigation.
@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?
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
/>
);
}
@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.
@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 ?
Other than using #474 to fix this issue (manually) - is there any update on when this will be merged to the next version?
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 :(
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 :)
