BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
933 stars 325 forks source link

Doesn't scroll to selected date on scrolling past a certain no. of months #325

Open Balthazar33 opened 2 years ago

Balthazar33 commented 2 years ago

First of all, thanks for the awesome package.

Here's the issue:

Config:

<CalendarStrip
                            selectedDate={new Date()} //Select current date by default
                            onDateSelected={(e) => {
                                console.log("Date selected", moment(e).format('dddd MM/DD/YYYY'));
                                setSelectedDate(moment(e).format('dddd MM/DD/YYYY'));
                            }}
                            dayComponentHeight={75}
                            scrollable
                            scrollerPaging
                            ref={calendarRef}
                            calendarHeaderFormat='MMMM'
                            style={{ height: 100 }}
                            calendarHeaderStyle={{  }}
                            calendarColor={'#fff'}
                            dateNumberStyle={{  }}
                            dateNameStyle={{ }}
                            highlightDateNumberStyle={{  }}
                            highlightDateNameStyle={{  }}
                            highlightDateContainerStyle={{  }}
                            disabledDateNameStyle={{ color: 'grey' }}
                            disabledDateNumberStyle={{ color: 'grey' }}
                            iconContainer={{ flex: 0.1 }}
                            useIsoWeekday={false}
                            startingDate={moment().day(0)}
                        />

Behaviour: On the press of a button, I'm calling calendarRef.current.setSelectedDate(moment(moment().format('MM/DD/YYYY'), "MM/DD/YYYY"))

This scrolls the calendar to the current date.

However, if I scroll for quite a few months, there's a glitch and then whenever I call the above function, it does not scroll back to the current date.

(Notice the glitch as I'm scrolling towards February [the month shows September/October for a split second])

https://user-images.githubusercontent.com/40452950/134676558-131ca579-fdfc-4504-b0de-dee46bccb026.mp4

Android version: 10 RN version: 0.63.4

joeljoeljoeljoel commented 2 years ago

I am also having this issue. It seems to have something to do with the scrollers recycling of days. It's the same issue if you call setSelectedDate with a date over half a year ago, it won't scroll to that date. Has anyone come up with a solution?

VikBn commented 2 years ago

I am also having this issue. It seems to have something to do with the scrollers recycling of days. It's the same issue if you call setSelectedDate with a date over half a year ago, it won't scroll to that date. Has anyone come up with a solution?

I solved the problem by duplicating the calendarStrip file to my project and changing the value this.numDaysScroll = your value. (You should change imports to this calendarStrip file)

cpandya231 commented 2 years ago

@Balthazar33 were you able to fix this ?

nkhan97 commented 1 year ago

I'm having the same issue. Did anyone seem to find a solution?

peacechen commented 1 year ago

Please create a PR to fix this bug. The recycler list view is a fickle one.

Looks like a work-around is the change numDaysScroll. This could be exposed as a prop to allow the caller to customize it to their needs.