React-native-calendars: Calendarlist does not re-render view when new marked dates are supplied

[idlework]

When I press a date in the CalendarList component, the date does not get visibly marked. This is due to the CalendarList not rendering it's subcomponents. When I scroll the selected date out of view, and roll it back into view it is visibly marked. This happens with the code below, but also with the example in this repository. This also happens to Calendar, of course, because CalendarList consists of Calendar components.

import React, { Component } from 'react'

import { CalendarList } from 'react-native-calendars'

export default class CalendarsList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      today: new Date(),
      markedDates: {}
    }
  }

  onDayPress = day => {
    const markedDates = this.state.markedDates
    const dateString = day.dateString

    if (markedDates.hasOwnProperty(dateString)) {
      delete markedDates[dateString]
    } else {
      markedDates[dateString] = { selected: true }
    }

    this.setState({ markedDates })
  }

  render() {
    const { today, markedDates } = this.state
    return (
      <CalendarList
        minDate={today}
        pastScrollRange={0}
        futureScrollRange={12}
        onDayPress={this.onDayPress}
        markedDates={markedDates}
      />
    )
  }
}

[tautvilas]

Make sure that markedDates is not being mutated, but recreated in each onDayPress:

const markedDates = Object.assign({}, this.state.markedDates)

if reference of markedDates property does not change calendar does not rerender.

[idlework]

@tautvilas this solves the issue, thanks a lot... It makes sense if you don't want to have complex object compares in the component it self.

You can mark it as solved :D

[sibelius]

@idlework can you close this?

[jvaclavik]

I had similar issue like this but even if I used markedDates as immutable it didn't work. It solves update from version 1.14.2 to 1.17.3.