Добавление сетки на реактивные-нативные календари

Question

Я использую библиотеку реагировать на родные календари в своем приложении с пользовательским компонентом дня. Последнее, что нужно добавить, - это сетка. Я попытался добавить границу, но внешний вид не в порядке: между горизонтальными границами все еще есть пространство, а вертикальные границы перекрывают друг друга и выглядят толще. Вот код:

// calendar screen
      <View>
        <CalendarList
          onVisibleMonthsChange={months => {
            // console.log('now these months are visible', months);
          }}
          firstDay={1}
          pastScrollRange={0}
          futureScrollRange={50}
          scrollEnabled
          showScrollIndicator={false}
          markedDates={markedDates}
          theme={{
            'stylesheet.calendar.main': {
              monthView: {
                backgroundColor: colors.grey30,
              },
              week: {
                flexDirection: 'row',
                justifyContent: 'space-around',
                backgroundColor: '#fff',
                // margin: 1,

                // borderBottomWidth: 1,
                // borderBottomColor: colors.grey30,
              },
            },

            'stylesheet.calendar.header': {
              header: {
                borderWidth: 0,
                paddingTop: 10,
                marginLeft: 10,
                ...globalStyles.regular,
              },
              monthText: {
                alignSelf: 'stretch',
                textAlign: 'left',
              },
              week: {
                marginTop: 7,
                flexDirection: 'row',
                justifyContent: 'space-around',
              },
            },
            textDayFontFamily: 'source-sans-pro-bold',
            textMonthFontFamily: 'source-sans-pro',
            textDayHeaderFontFamily: 'source-sans-pro-light',
            textDayFontSize: 14,
            // textMonthFontSize: 16,
            // textDayHeaderFontSize: 16
          }}
          dayComponent={({ date, state }) => {
            const dayMissions = missionsByDay ? missionsByDay[`${date.dateString}`] : null;
            const isNextMissionDay =
              missions && missions.length && missions[0].dateString === date.dateString;

            return (
              <DayComponent
                onPress={() => this.onDayPress(dayMissions, date.dateString)}
                isToday={isDateToday(date.dateString)}
                missions={dayMissions}
                date={date}
                state={state}
                isNextMissionDay={isNextMissionDay}
              />
            );
          }}
        />
      </View>

// DayComponent

    <TouchableOpacity
      onPress={onPress}
      style={{
        height: dayWidth,
        width: dayWidth,
        justifyContent: 'center',
        alignItems: 'center',
        // borderWidth: 1, //isToday ? 1 : 0,
      }}>
      {missions && missions.length > 1 && (
        <Text
          style={{
            position: 'absolute',
            right: 2,
            top: 2,
            width: 14,
            height: 14,
            borderRadius: 7,
            backgroundColor: '#000',
            color: '#fff',
            fontSize: 10,
            textAlign: 'center',
            textAlignVertical: 'center',
            overflow: 'hidden',
          }}>
          {missions.length}
        </Text>
      )}
      {missions && missions.length > 0 && (
        <BalaiIcon
          tintColor={isNextMissionDay ? colors.orange : colors.black}
          width="26"
          height="26"
        />
      )}
      {!missions && (
        <Text
          style={{
            textAlign: 'center',
            color: state === 'disabled' ? 'gray' : 'black',
          }}>
          {date.day}
        </Text>
      )}
    </TouchableOpacity>

Вот результат, который я получаю

Как я могу получить результат ниже (только в сетке)?