React-native-calendars: Calendar did not update marking date after select

Created on 2 Oct 2017 · 5Comments · Source: wix/react-native-calendars

I want to use this calendar for my app with range select.
My solution is:

Users first select date to mark it from date. (startingdate)
User select second date to mark it to date. (endingdate)
Then the date between them also marked.

here is my code:

constructor(props) {
      super(props);
      this.state = {
        isFromDatePicked: false,
        isToDatePicked: false,
      FromDate: '',
      ToDate: '',
      markedDates: {}
      };
    }
onDayPress(day) {
      let markedDates = this.state.markedDates;
      if(this.state.isFromDatePicked == false){
        markedDates[day.dateString] = [{startingDay: true, color: '#AED8D6'}];
        console.log(markedDates);
        this.setState({
          isFromDatePicked: true,
          FromDate: day.dateString,
          markedDates: markedDates
        });
      }else {
        //Check if toDate not yet check
        if(this.state.isToDatePicked == false){//not checked yet
          let fromDate = new XDate(this.state.FromDate);
          let toDate = new XDate(day.dateString);
          let range = fromDate.diffDays(toDate);
          if( range> 0){
            for (var i = 1; i <= range; i++) {
              //let tempFromDate = fromDate;
              let tempDate = fromDate.addDays(1);
              if(i < range){
                markedDates[tempDate.toString('yyyy-MM-dd')] = [{ color: '#AED8D6'}];
              }else{
                markedDates[tempDate.toString('yyyy-MM-dd')] = [{endingDay: true, color: '#AED8D6'}];
              }
            }
            this.setState({
              isToDatePicked: true,
              ToDate: day.dateString,
              markedDates: markedDates
            });
          }else{
            alert('To Date must greater than From Date');
          }

        }else{
          //do nothing
        }

      }
      }

<Calendar
            minDate={new XDate()}
      onDayPress={(day) => {this.onDayPress(day)}}
      style={styles.calendar}
      hideExtraDays
      markedDates={this.state.markedDates}
      markingType={'interactive'}
        />

This code seem to be work fine as it logic, but the UI did not change immediate, i must press the arrow to go to next month and press arrow back to see the UI updated.
What about the missing code here to update the UI? Or can we use a trigger to update UI after select dates?

Source