react-native-calendar-strip
react-native-calendar-strip copied to clipboard
Doesn't scroll to selected date on scrolling past a certain no. of months
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
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 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)
@Balthazar33 were you able to fix this ?
I'm having the same issue. Did anyone seem to find a solution?
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.