Render Issue when startDate and endDate are not in the current month about react-native-calendario HOT 11 CLOSED

Yeah, sounds good. do you want to create a PR for that?

from react-native-calendario.

@maggialejandro - Let me know if I did everything correct, this is my first time doing anything for open source! I appreciate you responding and helping me out these past couple days 🙌

from react-native-calendario.

*edit

Some further testing - looks like if the startDate is 1 month or ahead of the current date today, the render issue happens above.

So when i select just the date Nov 5th, the render issue does not happen, but if select the startDate to be Nov 6h, the render issue does happen

from react-native-calendario.

Hi @mvolonnino
could you please share a reproducible example? that would really help debugging the issue

from react-native-calendario.

Yes! so here is actually how im utilizing it and think i found one of the issues:

so my Calendar component looks like this:

return (
    <View>
      <CalendarIcon onPress={() => calendarRef.current?.present()} />
      <BottomSheetModal
        ref={calendarRef}
        footerComponent={renderFooter}
        snapPoints={['65%', '90%']}
        title="Select Dates"
      >
        <BottomSheetFlatList // * BottomSheetFlatList needed for Android scroll support
          data={[{ id: 'calendar' }]}
          contentContainerStyle={{ paddingBottom: 130 }}
          style={{ backgroundColor: colors.background }}
          renderItem={() => (
            <Calendar
              key={dark.toString()} // force rerender on theme change
              startingMonth={new Date().toISOString()}
              viewableRangeOffset={5}
              startDate={selectedDates.startDate}
              endDate={selectedDates.endDate}
              minDate={new Date()}
              monthHeight={MONTH_HEIGHT}
              numberOfMonths={13}
              onPress={selectDates}
              theme={getCalendarTheme(colors)}
              disableOffsetDays
            />
          )}
          keyExtractor={item => item.id}
        />
      </BottomSheetModal>
    </View>
  );

So to be able to actually scroll within a BottomSheetModal from gorham on Android, you need to either have it inside a FlatList from react-native-gesture-handler or its BottomSheetFlatList component. This gives gesture support to the bottom sheet, while also being able to scroll within the flatlist.

Looks like when i remove it from the BottomSheetFlatList, the calendar opens up to the month that has the startDate selected, and scrolling up shows the current month (in this case Oct).

This breaks the gesture support within the BottomSheetModal though, and I cannot scroll at all on Android device through the Calendar, instead, the gesture is captured only by the BottomSheetModal.

So looks like by implementing the workaround for Android to get scrolling of the months possible in the bottom sheet, this render issue happens

@maggialejandro - sorry, i've also never done a 'reproducible example' before, is there something else you need me to do?

from react-native-calendario.

I couldn't reproduce the bug
check this branch

from react-native-calendario.

mhm, in your code it doesn't look like the Calendar component wrapped within a BottomSheetFlatList as well. Im curious, are you able to scroll through the calendar on an Android device? The issue I have is that the scrolling does not pass through to the Calendar component while its wrapped in that BottomSheetModal.

Need that type of setup for the Gorham Bottom Sheet to be able to scroll within the Calendar component on Android. iOS worked without doing needing that workaround

Im wondering if there could be a prop passed to the Calendar component that would always have it open to the startingMonth prop or something like that

from react-native-calendario.

I see, it seems to be a @gorhom/bottom-sheet issue on Android.
It makes sense that if you add a scrollable component the calendar won't scroll to the correct month.

You could fork this library and replace Calendar's FlatList with gorhom's BottomSheetFlatList instead

from react-native-calendario.

I just tried and tested with the BottomSheetFlatList component, the performance takes a bit of a hit when just plugging that in.

I think a pretty simple and easy fix/workaround could be just exposing the initialScrollIndex that can override if one is passed in

      initialScrollIndex={
        props.initialScrollIndex ?? !isWeb && !calculateMonthHeightDynamically ? firstMonthIndex : 0
      }

when commenting out that line in Calendar.tsx line 286, the render issue is gone, and performance stays the same when testing on iOS and Android device.

This way, the Calendar can still be used within a BottomSheetFlatList in how I have it implemented above, with passing initialScrollIndex={0} and startingMonth in conjunction to have it open to the starting month everytime and not worry about scrolling to the selected date.

Do you think that is a valid fix for this specific issue im running into?

from react-native-calendario.

awesome, thank you!

from react-native-calendario.