How to remove the line divider in the 'react-native-calendar-picker' after selecting a date range

Question

I'm implementing the allowRangeSelection in https://www.npmjs.com/package/react-native-calendar-picker but the problem is the vertical line divider is present between the Tuesday, Wednesday and Thursday ,Friday when selecting a range date as seen in the image.

Does anyone know how to remove the vertical line or this is a known issue in the library?

I tried putting borderSize: 0 in selectedRangeStyle but still not working.

Here is the code:

<CalendarPicker
  ref={props.forwardedRef}
  previousComponent={
    <MaterialIcons
      name="keyboard-arrow-left"
      size={22}
      style={{ color: app.color.TEXT_100_HIGH, marginLeft: scale(18) }}
    />
  }
  nextComponent={
    <MaterialIcons
      name="keyboard-arrow-right"
      size={22}
      style={{ color: app.color.TEXT_100_HIGH, marginRight: scale(18) }}
    />
  }
  textStyle={{ color: app.color.TEXT_300_HIGH, fontWeight: "bold" }}
  todayBackgroundColor="transparent"
  todayTextStyle={app.color.currentDayCalendarText}
  disabledDatesTextStyle={{ color: "#445870" }}
  customDayHeaderStyles={() => {
    return {
      textStyle: { color: app.color.TEXT_200_MEDIUIM, opacity: 1 },
    };
  }}
  dayLabelsWrapper={{
    borderTopWidth: 0,
    borderBottomWidth: 0,
    marginLeft: scale(40),
  }}
  startFromMonday={true}
  selectedRangeStartStyle={{
    backgroundColor: app.color.calendarDefaultDateColor,
  }}
  selectedRangeEndStyle={{
    backgroundColor: app.color.calendarDefaultDateColor,
  }}
  selectedRangeStyle={{
    backgroundColor: app.color.calendarDefaultDateColor,
  }}
  selectedDayColor={app.color.calendarDefaultDateColor}
  selectedDayTextColor={"#FFFFFF"}
/>

Sample picture of the calendar

Answer 1

Try this prop, it works for me:

 dayLabelsWrapper={{
        borderBottomWidth: 0,
        borderTopWidth: 0,
      }}