I am trying to make infinite week / month horizontal slider.

My idea is to have an array of previous month, current month, next month – that order. Each time I “slide” onto next or previous month, the array should be re-adjusted with new previous and next month while correcting the index of current month with animated: false property due to unshift method that I have used so far.

That is the logic I’ve also noticed Google Calendar uses. The one thing that is bothering me the most so far is the deceleration rate of “VirtualizedList”. I’ve put decelerationRate=”fast” but it still seems to be very slow at that very few last moments before list actually stops moving. So far my idea was to call function that will adjust months/weeks on “onMomentumScrollEnd” function but its not smooth/fast at all since that onMomentumScrollEnd event takes at least 1 second to load. Here are some screenshots and videos from Google Calendar and from my app to better present you my problem.

1. Active month in Google Calendar (it has only month before and month after loaded and based on next photo you will see how I found that out)
   Google Calendar active month

2. When I scroll to the left (going month backwards) without letting of the scrolling (pinching with both fingers – without letting one of the screen) it is seeable that the list contains 3 elements as I’ve stated before – previous, current and next month.
   Google Calendar previous month

3. Same principle as on image no.2 – so on the right side there is “end of the list”
   Google Calendar next month

First problem I’ve encountered was when I scrolled “faster” it slide few indexes at the time. Then I’ve found out that there is a prop called “disableIntervalMomentum”. That fixed my problem a little bit but it still passes a lot of time from the moment I start to scroll to the moment it stops scrolling even with “disableIntervalMomentum” and “decelerationRate=”fast””.

Here is a link to my app where I demonstrate that “deceleration” issue I am dealing with – it decelerates good enough until that last 10% of the movement. At the right end it slows down a lot and I don’t want that. I want it to snap really fast as soon as it swipes to the one side it should stop almost instantly.

Behaviour I am looking for is something like this – Google Calendar

It snaps from one index to another really fast – and in case of “fast scroll” it even debounces a little bit from another slide but it still stays at the next wanted index. So for example I am on index 2. I swipe really fast to the right – it goes to index 3 and it even debounces and shows index 4 a little bit but it goes back and stops at index 3. As soon as it “stops” on index 3, it loads new previous and next month – and no matter how fast you scroll it is going to feel very smooth and it gives you impression of “infinite” sliding.

That is my ultimate goal to achieve something similar to that. I am currently using “VirtualizedList” – am I using the wrong component? Is there a component that by default has behaviour like I am describing?

What I am looking for seems like there must be some “built-in” component or prop or something because I’ve seen similar stuff on many other apps but I just can’t replicate it.

Any advice on this topic of “virtualization” of weeks / months is welcome. But at the end of the day I would really like to achieve similar behaviour to what Google Calendar has.