Changing state on onMonthChange doesn't move to the next/prev month

I’m trying to show the busy days in the calendar using the markedDates property. For the month I’m currently showing I build the markedDays hashtable dynamically from a SQLite database. When I click the next arrow in the calendar I use onMonthChange to call the method that updates the markedDates list. The list is updated correctly, however the month doesn’t move to the next.
I believe I was able to isolate the issue using the code provided in the example. Here’s an excerpt of ./example/src/screens/calendar.js with my changes:

`export default class CalendarsScreen extends Component { constructor(props) { super(props); this.state = { markedDates :{ ‘2017-07-24’: {selected: true, marked: true}, ‘2017-07-25’: {marked: true}, ‘2017-07-30’: {marked: true}, } }; this.onDayPress = this.onDayPress.bind(this); }

monthChange(month) { console.log(‘month changed2’,month); this.setState({ markedDates :{ ‘2017-07-01’: {selected: true, marked: true}, ‘2017-07-02’: {marked: true}, } });

} render() { return ( <ScrollView style={styles.container}> <Text style={styles.text}>Calendar with selectable date and arrows</Text> <Calendar onDayPress={this.onDayPress} onMonthChange={(month) => {this.monthChange.bind(this)(month)}} style={styles.calendar} current={‘2017-07-17’} hideExtraDays markedDates={ this.state.markedDates} `

If I comment out the “setState” call on the monthChange method, the next/prev arrows work correctly. However if I uncomment the setState, the month doesn’t change when the arrows are clicked.

Great work btw!

[tautvilas]

set state causes rerender of calendar, since you current does not match the date in calendar it is being reset to current. If you want to start from older month you can set current as older month but as month changes also update current value:

monthChange(month) {
 this.setState({currentdate: month})
}

[tautvilas]

thanks!