Calendar did not update marking date after select

[sonnguyenit]

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?

[shapovalstas]

Hey, @sonnguyenit! Have you solved this problem?

[shapovalstas]

Hey, @tautvilas! Could you help with the solution of this problem?

[shapovalstas]

let markedDates = {...this.state.markedDates} should fix your problem

[tautvilas]

Thx @sshapoval . The trick is that markedDates should be treated as immutable

[lazaronixon]

Base on @sonnguyenit code I created https://github.com/lazaronixon/react-native-date-range-picker