CalendarList rendering date string instead of calendar component even when it's fully visible

[kiratot]

Description

I'm building a date range picker with CalendarList similar to react-dates, I pass the starting date as the current date prop to the CalendarList component and I render everything in a modal with react-native-modal. The issue I was facing is when selecting the 31st day of a given month (all other days when selected work just fine), then I close the modal to reopen it again the current month was no longer visible and a date string is rendered instead. I've managed to dig around and have found that when its visible prop is false, the CalendarListItem component renders a date string e.g.: "2023-09-30". https://github.com/wix/react-native-calendars/blob/89bcf5bc159777ccf614ed545ac76a8605a621d9/src/calendar-list/item.tsx#L86-L106

The value of the visible prop is the returned result of this function: https://github.com/wix/react-native-calendars/blob/89bcf5bc159777ccf614ed545ac76a8605a621d9/src/calendar-list/index.tsx#L215-L223

So I have made some debugging and found that when the day of the month is 31, the newMonth variable is not what we expect it to be, and the XDate's addMonths function was causing an overflow issue. Luckily this is as straightforward to fix as passing true as a second argument to prevent the overflow from happening. Will make a pull request ASAP with the suggested fix.

Expected Behavior

The current CalendarListItem should be visible if a date is in range.

Observed Behavior

The current CalendarListItem was not rendered and a date string was visible instead.

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: react-native-calendars@1.1289.0
• npm ls react-native:

│ └── react-native@0.70.0 deduped ├─┬ @openspacelabs/react-native-zoomable-view@2.0.4 │ └── react-native@0.70.0 deduped ├─┬ @react-native-async-storage/async-storage@1.17.10 │ └── react-native@0.70.0 deduped ├─┬ @react-native-picker/picker@2.4.4 │ └── react-native@0.70.0 deduped ├─┬ @react-navigation/material-bottom-tabs@6.2.3 │ ├─┬ @react-navigation/elements@1.3.5 │ │ └── react-native@0.70.0 deduped │ ├─┬ react-native-paper@4.12.4 │ │ ├─┬ react-native-iphone-x-helper@1.3.1 │ │ │ └── react-native@0.70.0 deduped │ │ └── react-native@0.70.0 deduped │ └── react-native@0.70.0 deduped ├─┬ @react-navigation/material-top-tabs@6.2.3 │ └── react-native@0.70.0 deduped ├─┬ @react-navigation/native@6.0.12 │ └── react-native@0.70.0 deduped ├─┬ @react-navigation/stack@6.2.3 │ └── react-native@0.70.0 deduped ├─┬ @rnmapbox/maps@10.0.0-beta.36 (git+ssh://git@github.com/rnmapbox/maps.git#5b9605834113b98ceb76c17cebb37a5d8bd960e3) │ └── react-native@0.70.0 deduped ├─┬ @segment/analytics-react-native@2.8.0 │ └── react-native@0.70.0 deduped ├─┬ @segment/sovran-react-native@0.4.4 │ └── react-native@0.70.0 deduped ├─┬ @stripe/stripe-react-native@0.19.0 │ └── react-native@0.70.0 deduped ├─┬ react-native-app-link@1.0.1 │ └── react-native@0.70.0 deduped ├─┬ react-native-blob-util@0.16.2 │ └── react-native@0.70.0 deduped ├─┬ react-native-bootsplash@4.3.2 │ └── react-native@0.70.0 deduped ├─┬ react-native-calendar-events@2.2.0 │ └── react-native@0.70.0 deduped ├─┬ react-native-calendars@1.1289.0 │ └─┬ recyclerlistview@3.0.5 │ └── react-native@0.70.0 deduped ├─┬ react-native-device-info@10.1.2 │ └── react-native@0.70.0 deduped ├─┬ react-native-fast-image@8.6.1 │ └── react-native@0.70.0 deduped ├─┬ react-native-fingerprint-scanner@6.0.0 │ └── react-native@0.70.0 deduped ├─┬ react-native-gesture-handler@2.6.0 │ └── react-native@0.70.0 deduped ├─┬ react-native-localize@2.2.3 │ └── react-native@0.70.0 deduped ├─┬ react-native-modal@13.0.1 │ └── react-native@0.70.0 deduped ├─┬ react-native-pager-view@6.0.0 │ └── react-native@0.70.0 deduped ├─┬ react-native-render-html@6.3.4 │ ├─┬ @jsamr/react-native-li@2.3.1 │ │ └── react-native@0.70.0 deduped │ ├─┬ @native-html/transient-render-engine@11.2.3 │ │ └── react-native@0.70.0 deduped │ └── react-native@0.70.0 deduped ├─┬ react-native-restart@0.0.24 │ └── react-native@0.70.0 deduped ├─┬ react-native-safe-area-context@4.3.3 │ └── react-native@0.70.0 deduped ├─┬ react-native-screens@3.17.0 │ └── react-native@0.70.0 deduped ├─┬ react-native-scroll-into-view@2.0.2 │ └── react-native@0.70.0 deduped ├─┬ react-native-svg-transformer@1.0.0 │ └── react-native@0.70.0 deduped ├─┬ react-native-svg@13.2.0 │ └── react-native@0.70.0 deduped ├─┬ react-native-tab-view@3.1.1 │ └── react-native@0.70.0 deduped ├─┬ react-native-version-check@3.4.3 │ └── react-native@0.70.0 deduped ├── react-native@0.70.0 ├─┬ react-navigation-props-mapper@3.1.0 │ └── react-native@0.70.0 deduped └─┬ react-redux@8.0.2 └── react-native@0.70.0 deduped

Also specify:

1. Device/emulator/simulator & OS version: iOS Simulator of iPhone 13, iOS v15.0

Screenshots:

*When the current day date is 31:

*When the current day is other than 31:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[akramloginext]

Any solution for this issue??

[kiratot]

I've merged the bug fix already @akramloginext, try updating to the latest version and see how it goes.

[sleekLancelot]

This bug still exists on ios