`NaN` Passed to `onPageChange` When Swiping Before Date Initialization

[makedirectory]

Description: In the react-native-swipe-calendar component, there is an issue where the onPageChange callback receives a NaN value if the user swipes the calendar before the initial date is fully initialized. This occurs when the component is still loading and the data required to populate the calendar (such as displayedDays or the initial date) has not yet been set.

Steps to Reproduce:

1. Render the SwipeCalendar component while the required data for the calendar (e.g., the initial date or displayed days) is still loading.
2. Before the data is fully loaded, attempt to swipe the calendar to change months or dates.
3. Observe the onPageChange callback being invoked with a NaN date.

Expected Behavior: The onPageChange callback should either:

• Not be invoked until the initial date is fully initialized, preventing any NaN values from being passed.
• Return a valid date value or prevent interaction until the data is ready.

Actual Behavior: The onPageChange callback is invoked with a NaN value, which results in the following log output:

LOG  onPageChange Date { NaN }
LOG  onPageChange date is not a valid date
LOG  onPageChange Date { NaN }
LOG  onPageChange date is not a valid date

This causes issues in my application where date-dependent logic fails, and React components using this callback may render incorrectly or crash.

Code Snippet: Here is a simplified version of the handlePageChange callback I am using:

Copy code
const handlePageChange = useCallback(
    (date: any) => {
        console.log('onPageChange', date);

        // Check if date is NaN, null, or undefined
        if (!date || isNaN(new Date(date).getTime())) {
            console.log('onPageChange date is not a valid date');
            return;
        }

        // Proceed with valid date logic
        if (!isSameMonth(date, currentDate)) {
            // Handle month change
        }
    },
    [currentDate, setCurrentDate, onSelectDay]
);

In my use case, the calendar is sometimes rendered before the data is ready, and the gesturesDisabled prop does not prevent the issue.

I also attempted to set the current date to a default value (e.g., new Date()) in the onPageChange handler if NaN is detected, but this did not resolve the issue. The NaN continues to be passed into the callback before the data is fully initialized, even when trying to provide a fallback date.

// Check if date is NaN, null, or undefined
if (!date || isNaN(new Date(date).getTime())) {
    console.log('onPageChange date is not a valid date');
    setCurrentDate(new Date()) // <--- Set default value here if NaN
    return;
}

Additional Information:

• Version: react-native-swipe-calendar@^0.0.21
• React Native Version: "0.74.1",
• Platform: on iOS, untested on Android
• Workaround: I’ve attempted disabling gestures using gesturesDisabled={!displayedDays}, but this does not fully prevent the issue.

Request: I would suggest either:

• Preventing onPageChange from being invoked when the calendar is not fully initialized.
• Ensuring that the component handles swipes gracefully by passing valid date values or preventing user interaction until the data is ready.

[StormJo]

Is there a solution already?