Strange jump in the scroll of the strip

[rdewolff]

Does anyone have a similar issue ?

When I scroll the calendar-strip, there seems to be an unwanted render sometimes and jumping back to the begining.

(duration: 23sec)

[StackTraceYo]

I too am seing this. Im noticing it when i use the minDate prop

[rdewolff]

I too am seing this. Im noticing it when i use the minDate prop

It seems to happen depending on some parameters. Did u find what’s causing this by any chance?

Anyone else?

[rdewolff]

Are you using the minDate props when that happens @StackTraceYo ?

[StackTraceYo]

Are you using the minDate props when that happens @StackTraceYo ?

@rdewolff yes I see it when I use that flag. I noted that in my original comment.

removing the minDate removes the issue - but id like to use it with minDate

[rdewolff]

Whoops sorry missed that. Just ran some test yesterday and noticed that and wanted to share.

[peacechen]

If you have time to debug, please submit a PR with a fix

[DanielMalak]

i also have the same issue because of minDate anyone has a workaround somehow ?? thanks

[crisfast]

Hello, I had the same problem. Also week arrows are not doing anything on android

      <CalendarStrip
        scrollable
        style={{ height: 90 }}
        minDate={moment()}
        onDateSelected={(newDate) => changeDate(newDate)}
        selectedDate={selectedDate}
        calendarHeaderStyle={styles.calendarHeader}
        dateNameStyle={styles.dateName}
        dateNumberStyle={styles.dateNumber}
        highlightDateNameStyle={styles.selectedDateName}
        highlightDateNumberStyle={styles.selectedDateNumber}
        weekendDateNameStyle={styles.dateName}
        weekendDateNumberStyle={styles.dateNumber}
        iconStyle={styles.arrowStyle}
        iconLeftStyle={styles.leftArrowStyle}
        iconRightStyle={styles.rightArrowStyle}
        locale={roCalendarConfig}
      />

[peacechen]

@crisfast I used as much as I could from your code snippet in the sample project and it works. You didn't provide the styles or locale, but that shouldn't affect the arrows. Please submit complete code using the sample project. I recommend opening another ticket for issues unrelated to the original issue in this thread.

[naheed-shamim]

One solution is to keep the current date at center, and disabling the previous dates.

const CALENDAR_MIN_DATE = moment().subtract(3, "days");
const CALENDAR_BLACKLIST_DATES = [
  {
    start: CALENDAR_MIN_DATE,
    end: moment().subtract(1, "day"),
  },
];

 <CalendarStrip
...
            minDate={CALENDAR_MIN_DATE}
            datesBlacklist={CALENDAR_BLACKLIST_DATES}
...

/>