React-native-calendars: Center selected date background visually

[idlework]

Description

I want, just as in the first demo image in the readme, to center the selected date background. Now it has a offset downwards to include the dot. But i don't need the dot in my implementation.

If I take a look at the code I am able to change this and don't see an option to pass a variable. Is this feature included or should I implement it?

What I want:

What I get:

Expected Behavior

On touch I add selected dates to the marked dates. I don't use the dot marking. the background of the selected date should be rendered center.

Environment

iOS phone and simulator

Reproducible Demo

class LoadsDatePicker extends Component {
  state = {
    markedDates: {},
    today: new Date()
  }

  onDayPress = day => {
    const markedDates = Object.assign({}, this.state.markedDates)
    const dateString = day.dateString

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

    this.setState({ markedDates })
  }

  render () {
    const { markedDates, markedDatesLength, today } = this.state
    return (
        <CalendarList
          style={[styles.calendar]}
          minDate={today}
          pastScrollRange={0}
          futureScrollRange={12}
          onDayPress={this.onDayPress}
          markedDates={markedDates}
          theme={calendarListStyles}
        />
    )
  }
}

const calendarListStyles = {
  calendarBackground: '#ffffff',
  textSectionTitleColor: '#b6c1cd',
  selectedDayBackgroundColor: '#1BB9EA',
  selectedDayTextColor: '#ffffff',
  todayTextColor: '#00adf5',
  dayTextColor: '#2d4150',
  textDisabledColor: '#d9e1e8'
}

[tautvilas]

Hi, currently centering circle in this marking type is not supported. However you can overcome this with advanced styling (since 1.7.0). I think you should override this part of the stylesheet:

theme={{
  'stylesheet.day.basic': {
    text: {
      marginTop: 4, // specify the margin you want
      ...otherTextStyles
    }
  }
}}

[galaxyreal]

You had done using this way:

...
markedDates={{

       '2020-02-10': {selected: true, selectedColor: 'blue'},
       '2020-02-19': {selected: true, selectedColor: 'blue'},
       '2020-02-21': {selected: true, selectedColor: 'blue'},
       '2020-02-24': {selected: true, selectedColor: 'blue'},
       '2020-02-29': {selected: true, selectedColor: 'blue'},
      }}

/>