React-native-calendars: Selected day background not working

[dobiedad]

Hi Everyone,

Firstly thanks for the great tool !

Im trying to get the background circle to appear behind the selected date. The dot colour sets correctly but the background of the selected day does not. Any idea why?

here is my code

import React, { Component } from 'react'
import { CalendarList } from 'react-native-calendars';

class BookAppointment extends Component {

  constructor(props){
    super(props)
    this.state = {
      markedDay:{}
    }
  }
  select(day) {
    const markedDay = {[day.dateString]:[{selected: true, marked: true}]}
    this.setState({markedDay: markedDay})
  }
  render() {
    return (
      <CalendarList
      scrollEnabled={true}
      onDayPress={this.select.bind(this)}
      markedDates={this.state.markedDay}
      pastScrollRange={0}
      theme={{
        selectedDayBackgroundColor: 'red',
        todayTextColor: 'brown',
        dotColor: 'grey',
        arrowColor: 'orange',
        monthTextColor: 'blue',
        textDayFontSize: 16,
        textMonthFontSize: 16,
        textDayHeaderFontSize: 16
      }}
      futureScrollRange={12}
    />
    )
  }

}

export {BookAppointment as default}

[tautvilas]

I think your markedDates format is incorrect:

markedDates={{
    '2012-05-16': {selected: true, marked: true},
    '2012-05-17': {marked: true},
    '2012-05-18': {disabled: true}
  }}

for simple marking value does not have to be array

[dobiedad]

Ah thank you so much !

Correct format for anyone else experiencing the same issue is :
const markedDay = {[day.dateString]:{selected: true, marked: true}}

[SupriyaKalghatgi]

Thank you for this tool

I dont have markedDates with <Calendar>
Yet cannot theme selectedDayBackgroundColor and selectedDayTextColor

[sumanpula]

You can try this to change selected date background colour, this worked for me perfectly.
theme={{
monthTextColor: '#165c96',
arrowColor: '#165c96',
todayTextColor: '#33a8e2',
selectedDayTextColor: 'white',
selectedDayBackgroundColor: '#165c96',
}}
markedDates={{
[this.state.date]: { selected: true },
}}
minDate="2019-02-01"
onDayPress={day => this.setState({ date: day.dateString })}
/>

just setting values in theme alone will not work.