Background color day not work about react-native-calendars

[tautvilas]

Please try this:

selecionarData = (day) => {        
    const {datesMarked} = this.state;
    datesMarked =  {...datesMarked,  [day.dateString]: [{startingDay: true, color: '#42aaf4', selected: true}, {selected: true, endingDay: true, color: '#42aaf4', textColor: 'white'}]};
    this.setState({datesMarked: datesMarked})
}

Make sure that datesMarkes is not being mutated, but treated as immutable variable (so on each change it is being initialized again)

[tautvilas]

Hi, can you paste code of onDayPress ?

[vagnerSl]

onDayPress(day) { this.props.selecionarData(day); }

selecionarData = (day) => {        
    const {datesMarked} = this.state;
    datesMarked[day.dateString]=  [{startingDay: true, color: '#42aaf4', selected: true}, {selected: true, endingDay: true, color: '#42aaf4', textColor: 'white'}];
    this.setState({datesMarked: datesMarked})
}

[vagnerSl]

thanks !

[AkshitSahani]

Hi, I'm encountering the exact same problem. The background color for the dates is not changing unless I press the left or right arrow key to change month.

<Calendar
style={{marginTop: 70}}
minDate={getDate()}
maxDate={getDate('max')}
hideExtraDays={true}
onDayPress={(day)=>{this.selectDate(day)}}
markedDates={this.state.selectedDates}
onMonthChange={(month)=>{this.nextMonth(month);}}
/>

selectDate = (day) => {
const {tappedDates} = this.state;
let updatedTappedDates = {...tappedDates};
if(updatedTappedDates[day.dateString] && updatedTappedDates[day.dateString] < 2){
updatedTappedDates[day.dateString] += 1;
}
else if(updatedTappedDates[day.dateString] === 2){
updatedTappedDates[day.dateString] = 0;
}
else{
updatedTappedDates[day.dateString] = 1;
}

let color;
const calGreen = "#BFE9E6";
const calYellow = "#FBDC98";
const calRed = "#E7808D";

switch (updatedTappedDates[day.dateString]) {
  case 0:
    color = calGreen;
    break;
  case 1:
    color = calYellow;
    break;
  case 2:
    color = calRed;
    break;
  default:
    color = calGreen;
}

// const {selectedDates} = this.state;
// selectedDates = {...selectedDates, [day.dateString]: {selected: true, selectedColor: 'orange'}};
-------if i write these two lines above, based on the solution you provided to vagnerSI, I get an 
            error saying "selectedDates is read-only"-------

// const {selectedDates} = this.state;
// let newSelectedDates = {...selectedDates, [day.dateString]: {selected: true, selectedColor: 
    color}};
          ---- I tried this solution as well but not successful-------

let selectedDates = Object.assign({}, this.state.selectedDates);
selectedDates[day.dateString] = {selected: true, selectedColor: color};
this.setState({selectedDates: selectedDates});
 ------ I tried this solution as well after looking at some of your answers to other people having the 
            same problem, but this one is not successful either ----

};