gitmyhub

react-native-snap-carousel

JavaScript ★ 11k updated 2y ago

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.

JavaScriptReact Nativesetup: easycomplexity 2/5

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