Custom day view have margins around.

I’m trying to make calendar custom day view in my app. I want to day views take all available horizontal width and height evenly.

I tried to use flex: 1 on container, but calendar is always putting some spacing between elements.

This is my JSX for day view:

<View style={Styles.container}>
    <Text style={Styles.dayText}>1</Text>
    <View style={Styles.reportedHoursBox}>
        <Text style={Styles.hoursText}>8h</Text>
    </View>
</View>

I have tried to change calendar theme by changing some day view properties by changing stylesheet.day.single, there is a width and height in base, It didn’t work.

I’m aiming for grid view with day view borders, like excel sheet. Someone can tell me what props and styles I have to change to make layout without margins? Container view have border line around, and this is how I know it has spacing between day views.

[darron1217]

@7laria After some inspection, the code below worked for me. Thank you for the hint 👍

theme={{
  'stylesheet.calendar.main': {
    week: {
      marginTop: 3,
      marginBottom: 3,
      flexDirection: 'row',
      justifyContent: 'space-around',
    },
  },
}}

[7laria]

solved: react-native-calendars/src/calendar/style.js week: { // marginTop: 7, // marginBottom: 7, flexDirection: 'row', justifyContent: 'space-around' },

my component is: <TouchableOpacity onPress={() => { this.selectDate(date) }} disabled={!Object.keys(this.state.markedDays).includes(date.dateString)} style={{ width: 50, height: 50, borderColor: 'grey', borderWidth: 1, margin: 0, backgroundColor: (Object.keys(this.state.markedDays).includes(date.dateString)) ? backgroundColor : '#E0E0E0', alignItems: 'center', justifyContent: 'center' }}> <Text style={{ color: labelColor }}>{date.day + ''}</Text> </TouchableOpacity>