react-native-snap-carousel
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
A React Native carousel component for swiping through cards or images with snap-to-position behavior, offering flat, stacked deck, and Tinder-style swipe animations along with a parallax image effect and pagination dots.
This is a carousel component for React Native, the framework used to build mobile apps for Android and iOS using JavaScript. A carousel is the kind of UI element where a row of items (images, cards, or other content) can be swiped through one at a time, snapping into place as you scroll. This library provides that behavior, along with several visual options and performance optimizations for handling large numbers of items.
Three built-in layout styles are available. The default layout is a flat horizontal swiper. The stack layout stacks cards on top of each other and fans them out as you scroll, similar to flipping through a physical deck. The tinder layout mimics the swipe animation made popular by dating apps. Each layout can be configured with props, and developers can also build fully custom animations by working with the library's interpolation system.
The library also includes a parallax image component, which creates a subtle depth effect where the background of an image moves at a different speed than the foreground when swiping. A pagination component is available for displaying dots or indicators that show which slide the user is on.
For performance, the library uses React Native's FlatList under the hood for the default layout, which only renders the items currently visible on screen. The stack and tinder layouts use a ScrollView instead, which renders all items at once, so the README cautions against using those layouts with very large data sets.
The project started in 2016 and accumulated over 10,000 stars, but as of the README the maintainers were actively looking for contributors to help keep the project current.
Where it fits
- Build a swipeable image gallery in a React Native app where photos snap into place and pagination dots show the current slide
- Create a Tinder-style swipe-through card interface for a product catalog or app onboarding screen
- Add a stacked card deck animation to a mobile app where cards fan out as the user scrolls through them
- Display a horizontal content carousel with parallax depth effects on item images for a polished mobile UI