react-native-calendars
react-native-calendars copied to clipboard
wix
Week calendar wrong alignment
Description
Week calendar is not displaying correctly. Alignment is not respected and weird behavior occurs on scroll.
Expected Behavior
Calendar dates being aligned with day names.
Observed Behavior
The dates are not aligned with day names, see:
Strange behavior of dates on scroll, see
Monday 18 becomes 17 when scrolling back to it.
Environment
-
npm ls react-native-calendars: [email protected] -
npm ls react-native: [email protected]
Searching in the source code i found that by default weekcalendar width is 100% screen width maybe this is relationed with the bug, this value is used to calculate some width elements by example width of week content (The reason for not aligned items) you can specify calendarWidth prop to weekcalendar to change this value.
https://github.com/wix/react-native-calendars/blob/fb0d6543294c8047978934a98201d174d567fa25/src/expandableCalendar/weekCalendar.js#L63
I was facing this issue for past 2 days. What helped was removing all the styling in the WeekCalendar element and also all styling of the container wrapping the WeekCalendar element.
WeekCalendar takes the screenWidth to occupy the space and does not respect the margins or the padding you might give
