react-native-calendars: endingDay & startingDay are not displayed correct on Android.

as mentioned from @ahanriat , to fix this we need add overflow: hidden into base stylesheet from day period. And since the PR still not merged https://github.com/wix/react-native-calendars/pull/728 , you can try to solve the issue like this :

theme={{
  'stylesheet.day.period': {
      base: {
        overflow: 'hidden',
        height: 34,
        alignItems: 'center',
        width: 38,
      }
  }
}}

+1

npm ls react-native-calendars: 1.21.0 npm ls react-native: 0.57.5

Having the same issue on android (works fine on iOS). It’s only present after a selection is made on the calendar. If a period is sent to the calendar on open, it rounds the corners properly.

on load:

after new selection:

@elgalesmana In the first load, marked dates are shown correctly. I’m passing the markedDates from the state, but the broderRadius disspear from the starting date once the component is updated (once markedDates are changed)

<Calendar 
  markedDates={this.props.markedDates}
  onDayPress={this._handleDayPress}
  theme={{'stylesheet.day.period': {
            base: {
              overflow: 'hidden',
              height: 34,
              alignItems: 'center',
              width: 38,
            }
   }}
/>

I’ll conduct a bit more investigation and if it happens to be a correct fix I’ll propose a PR 🤗

You can use prop dayComponent to pass your own day component. It works for me.

import React from 'react';
import { View, Text, TouchableWithoutFeedback, StyleSheet } from 'react-native';

export default class CalendarDay extends React.PureComponent {
    constructor(props) {
        super(props);

        this.onDayPress = this.onDayPress.bind(this);
    }
    onDayPress() {
        const { onPress, date } = this.props;

        onPress(date);
    }
    render() {
        const {
            marking: {
                color: backgroundColor,
                startingDay,
                endingDay,
                selected
            },
            state
        } = this.props;

        return (
            <TouchableWithoutFeedback onPress={this.onDayPress}>
                <View
                    style={[
                        styles.container,
                        { backgroundColor },
                        startingDay ? styles.startingDay : null,
                        endingDay ? styles.endingDay : null
                    ]}
                >
                    <Text
                        allowFontScaling={false}
                        style={[
                            styles.text,
                            selected ? styles.selected : null,
                            state === 'today' ? styles.today : null
                        ]}
                    >
                        {String(this.props.children)}
                    </Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        alignSelf: 'stretch',
        marginLeft: -1,
        height: 34,
        justifyContent: 'center'
    },
    text: {
        fontFamily: 'ApexNew-Book',
        color: '#000',
        fontSize: 14
    },
    selected: {
        color: '#FFF'
    },
    startingDay: {
        borderBottomLeftRadius: 17,
        borderTopLeftRadius: 17
    },
    endingDay: {
        borderBottomRightRadius: 17,
        borderTopRightRadius: 17
    },
    today: {
        fontWeight: 'bold'
    }
});

@tamer-mohamed you need to update the markedDates state values. you can do this with onDayPress like in this plugin https://github.com/lazaronixon/react-native-date-range-picker/blob/master/DateRangePicker.js