search

BugiDev / react-native-calendar-strip

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

scroll issue #353

Open amannarola opened 2 years ago

amannarola commented 2 years ago

https://user-images.githubusercontent.com/60807630/180593309-b7f496b7-70e1-43a1-88ae-bf7262fc21b2.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 commented 1 year ago

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

peacechen commented 1 year ago

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 commented 1 year ago

Facing same issue here as well!

thijs-qv commented 11 months ago

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.