Introducing Sideswipe: a cross-platform carousel for React Native

  • Ideally we want to animate based on scroll position, not index changes, which would provide a much smoother effect.Old solution for handling transitions between itemsI knew I could add an Animated.event to the FlatList and pass the animated value to the child components but the value would be the raw…
  • This means the components using the animated value would have do some math to figure out if they were the active index.
  • It also updates any time either one of the underlying animated values updates.What this means is we can divide the scroll position by the width of a child item (which is a required prop) and that will give us an animated value starting at 0 and ending at the length…
  • Now child components can animate based on their index instead of scroll position but the animation will still be based on scroll position under the hood.
  • Here’s what that looks like in code:Using Animated.divide to get animated value for carousel itemsNow each carousel item gets an animated value they can use to create entrance and exit animations based on their index in the list, not the scroll position of the underlying FlatList, this provides a much…

Recently I found myself in need of a flexible carousel solution that could support some pretty tough requirements, mainly: My first attempt was to utilize open-source and use something someone else…

My first attempt was to utilize open-source and use something someone else had already created. So I set out on my Google journey, and while I was brought to so many amazing places, nothing felt quite like home.

While all of these solutions are quite amazing, they don’t meet all the requirements stated above. Any other solution I found either seemed to be experimental or still not have all of what I needed. Not to mention most solutions had largely different solutions for iOS and Android. This means you need to understand two distinct implementations to debug issues or try to extend the library.

Now knowing that trying to use the actual scroll events to manage carousel positioning was not going to work, I decided to do the most dreaded thing in all of UI development and hijack the native behavior.

I figured that if I could move the scrollview 1:1 with the user’s finger and then depending on how fast they are dragging (velocity), compute the proper index to land on, I could then scroll the list view programmatically.

to control the list.

This ended up working surprising well! At first the code was a bit of a mess but I got some great feedback from Jason Brown and Narendra N Shetty and was able to land on a solid solution! While it was close to meeting all the requirements, I had yet to deal with animations for the…

Introducing Sideswipe: a cross-platform carousel for React Native