scroll issue

[amannarola]

ss4.mov

When I use dateBlackList,at that time scroll is not working otherwise it's working fine.Why this is happening.
Please give me solution for this issue

My code looks like:

<CalendarStrip
scrollable
scrollerPaging
dayComponentHeight={hp(8)}
key={key}
isEnglish
useIsoWeekday={true}
numDaysInWeek={7}
showWeekNumber
showEnglishLunar
selectedDate={date}
onDateSelected={changeDate}
datesBlacklist={datesBlacklistFunc}
disabledDateNameStyle={[styles.dateNameStyle, {
color: colors.cardSubText
}]}
disabledDateNumberStyle={[styles.dateNumberStyle, {
color: colors.cardText
}]}
onWeekChanged={(start, end) => {
setMonthYear(start)
}}
calendarHeaderStyle={{
display: 'none'
}}
style={[styles.style, {
backgroundColor: colors.navigationBackground,
}]}
innerStyle={[styles.innerStyle, {
backgroundColor: colors.cardBackground,
}]}
dayContainerStyle={[styles.dayContainerStyle, {
backgroundColor: 'transparent',
// right: wp(-2)
}]}
highlightDateContainerStyle={[styles.highlightDateContainerStyle, {
backgroundColor: colors.secondaryColor100,
// right: wp(-2)
}]}
updateWeek={true}
highlightDateNameStyle={[styles.highlightDateNameStyle, {
color: colors.selectedDayText
}]}
highlightDateNumberStyle={[styles.highlightDateNumberStyle, {
color: colors.selectedDateText
}]}
dateNameStyle={[styles.dateNameStyle, {
color: colors.cardSubText
}]}
dateNumberStyle={[styles.dateNumberStyle, {
color: colors.cardText
}]}
iconContainer={{
display: 'none'
}}
/>

[OlivierPapineau]

Exact same issue here. This package does not seem to still be maintained...

[peacechen]

Please submit a PR. Instructions to develop and debug this library locally:
https://github.com/BugiDev/react-native-calendar-strip#development-with-sample-application

[salmandayal]

Facing same issue here as well!

[thijs-qv]

I had the same issue but with markedDates instead of datesBlacklist. There's some comparisons being done of props in CalendarStrip componentDidUpdate:

    if (!this.compareDates(prevProps.startingDate, this.props.startingDate) ||
        !this.compareDates(prevProps.selectedDate, this.props.selectedDate) ||
        prevProps.datesBlacklist !== this.props.datesBlacklist ||
        prevProps.datesWhitelist !== this.props.datesWhitelist ||
        prevProps.markedDates  !== this.props.markedDates  ||
        prevProps.customDatesStyles !== this.props.customDatesStyles )
    {

Wrapping the markedDates prop in useMemo worked for me.