scrollerPaging. The strip spins on 6 days for the first time, then – on 7 days

[artcherenkov]

If the week starts on Monday, I want the bar to scroll until the next or previous Monday, but for some reason, when the first scroll, the bar spins for 6 days, and then properly - for 7 days.

My config:

<CalendarStrip
  scrollable
  scrollerPaging
  style={{ height: 200, paddingTop: 20, paddingBottom: 10 }}
  calendarColor={'#3343ce'}
  iconContainer={{ flex: 0.1 }}
/>

Someone know, how to fix it?

[Andrerm124]

I'm also facing this issue. Not sure on the cause but it makes the app look a little confusing at times.

[peacechen]

This may be a bug in the scrolling algorithm. Please use the demo project in this repo to debug and submit a PR.

https://github.com/BugiDev/react-native-calendar-strip#development-with-sample-application

[peacechen]

This has been published in 2.2.0

Thanks @psolom for the PR

[ozanmanav]

@peacechen Same issue happening on master branch. I'm setting starting of date as Monday. But it is again changing to Sunday when we scroll to next week.

[psolom]

@ozanmanav Make sure you set minDate and maxDate params, and the difference between values is a multiple of 7 - number of days in a week (14, 21, 28, etc). Works for me in versions of 2.2.0+

[ozanmanav]

@psolom Thanks for answer. Can you share a piece of code for this situation? In my case, it starts with Monday when it doesn't scroll at all, but when it scrolls it always becomes Sunday on the first day. The props I am currently using for this are as follows.

  const startingDate = 2021-04-19

    scrollable = {true}
    scrollerPaging = {true}
    useIsoWeekday = {false}
    startingDate = {startingDate}

The first view is as follows:

But if I scroll it works like this:

[ozanmanav]

I think I found the problem. This problem happens when I close the left selector and right selector. When you open them, the problem disappears. I guess there is actually a little slip.

I made an issue about this: #291

[rjuevesano]

@ozanmanav try this solution on this issue https://github.com/BugiDev/react-native-calendar-strip/issues/266