# meliorence/react-native-snap-carousel

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/meliorence-react-native-snap-carousel).**

10,519 stars · 2,281 forks · JavaScript · BSD-3-Clause

## Links

- GitHub: https://github.com/meliorence/react-native-snap-carousel
- awesome-repositories: https://awesome-repositories.com/repository/meliorence-react-native-snap-carousel.md

## Topics

`advanced-effects` `carousel` `flatlist-based` `infinite-scroll` `parallax-effect` `swiper`

## Description

This project is a cross-platform mobile carousel component for creating swipeable image and content sliders. It functions as a virtualized list component that maintains performance by removing off-screen elements and utilizes a native-driver animation library to map scroll offsets to style properties on the native thread for lag-free transitions.

The library provides a parallax image gallery capable of shifting images relative to scroll progress to create a sense of depth. It also features a layout system that supports right-to-left orientations for languages such as Arabic and Hebrew.

Capability areas include the implementation of infinite looping, programmatic slide navigation, and custom layout patterns like card stacks or tinder-style interfaces. The component supports both horizontal and vertical orientations, pagination indicators, and configurable snap behavior.

## Tags

### Mobile Development

- [React Native Components](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components.md) — Provides a specialized swipeable carousel component for React Native mobile applications.
- [Mobile Navigation UX Enhancements](https://awesome-repositories.com/f/mobile-development/mobile-navigation-ux-enhancements.md) — Provides advanced mobile navigation patterns including card stacks and tinder-style swipe interfaces.

### User Interface & Experience

- [Carousel Components](https://awesome-repositories.com/f/user-interface-experience/carousel-components.md) — Implements UI elements for cycling through sets of content or images within a single container. ([source](https://github.com/meliorence/react-native-snap-carousel#readme))
- [Content Carousels](https://awesome-repositories.com/f/user-interface-experience/content-display-components/content-carousels.md) — Provides a comprehensive swipeable content carousel component for mobile applications. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/PULL_REQUEST_TEMPLATE.md))
- [Native Thread Animation Engines](https://awesome-repositories.com/f/user-interface-experience/animation-optimization-tools/animation-performance-optimizers/native-thread-animation-engines.md) — Offloads animation logic and property updates to the native UI thread to ensure jank-free visual transitions. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md))
- [Carousel Layout Configurations](https://awesome-repositories.com/f/user-interface-experience/carousels/carousel-layout-configurations.md) — Offers configurable layout options for orientation, item spacing, and stacking patterns. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md))
- [Virtualized List Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering.md) — Employs virtualized list rendering to maintain performance by removing off-screen elements.
- [High-Performance Rendering](https://awesome-repositories.com/f/user-interface-experience/high-performance-rendering.md) — Uses optimized rendering techniques like removing off-screen subviews to minimize overhead and maintain frame rates. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md))
- [Infinite Looping Carousels](https://awesome-repositories.com/f/user-interface-experience/infinite-looping-carousels.md) — Wraps the item list so scrolling past the last item returns the user to the beginning. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md))
- [Looping Content Carousels](https://awesome-repositories.com/f/user-interface-experience/infinite-scroll-components/looping-content-carousels.md) — Provides components that wrap back to the first element after the last is reached for continuous browsing. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/CHANGELOG.md))
- [Native Animation Drivers](https://awesome-repositories.com/f/user-interface-experience/native-animation-drivers.md) — Utilizes native animation drivers to map scroll offsets to styles for lag-free transitions.
- [Parallax Image Sliders](https://awesome-repositories.com/f/user-interface-experience/parallax-containers/parallax-image-sliders.md) — Implements a parallax image gallery that shifts image positions relative to scroll progress for depth. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PARALLAX_IMAGE.md))
- [Carousel Navigation APIs](https://awesome-repositories.com/f/user-interface-experience/programmatic-triggers/carousel-navigation-apis.md) — Includes programmatic APIs to navigate to specific slides or move to the next/previous item. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md))
- [Imperative Scroll Controllers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-to-index-mappers/imperative-scroll-controllers.md) — Provides imperative controllers to programmatically move the scroll viewport to specific indices or offsets.
- [Scroll Snapping](https://awesome-repositories.com/f/user-interface-experience/scroll-snapping.md) — Aligns the interface to the center of the nearest item when the user releases their touch. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md))
- [Scrolling Carousels](https://awesome-repositories.com/f/user-interface-experience/scrolling-carousels.md) — Provides a container for item collections with tracking of the active index and scroll position. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md))
- [Slide Navigation Logic](https://awesome-repositories.com/f/user-interface-experience/slide-navigation-logic.md) — Implements controls governing the progression of slides, including programmatic movement and index retrieval. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/CHANGELOG.md))
- [View-to-Data Mappings](https://awesome-repositories.com/f/user-interface-experience/view-to-data-mappings.md) — Provides mechanisms for linking visual UI components to their corresponding data indices in a collection. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/VERSION_4.md))
- [Infinite Loop Wrapping](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/interaction-restrictions/boundary-constraints/position-wrapping/infinite-loop-wrapping.md) — Implements circular index wrapping to enable infinite looping of carousel content.
- [Layout Interpolators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/frame-execution-synchronization/animation-frame-rate-controls/frame-interpolation-engines/layout-interpolators.md) — Allows defining custom layout interpolations to map scroll progress to specific item style changes. ([source](https://github.com/meliorence/react-native-snap-carousel#readme))
- [Carousel Transition Effects](https://awesome-repositories.com/f/user-interface-experience/carousel-transition-effects.md) — Provides specialized visual animation styles and stacking patterns for transitioning between items. ([source](https://github.com/meliorence/react-native-snap-carousel#readme))
- [Position Indicators](https://awesome-repositories.com/f/user-interface-experience/carousels/position-indicators.md) — Displays position indicators that communicate the current index within the rotating content set. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PAGINATION.md))
- [Right-To-Left Support](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-toolkits/right-to-left-support.md) — Provides styling rules and components that adjust visual flow and alignment for right-to-left languages. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/CHANGELOG.md))
- [Offset Calculators](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/offset-calculators.md) — Calculates item offsets relative to scroll position to drive dynamic visual transformations.
- [Scroll Snapping Configurations](https://awesome-repositories.com/f/user-interface-experience/layout-containers/scroll-snapping-configurations.md) — Implements configurable snap behavior to determine how slides align after a scroll gesture. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md))
- [Layout Templates](https://awesome-repositories.com/f/user-interface-experience/layout-management/component-layout-containers/layout-templates.md) — Offers predefined layout templates for positioning items as cards or tinder-style stacks.
- [Predefined Visual Layouts](https://awesome-repositories.com/f/user-interface-experience/layout-positioning/predefined-visual-layouts.md) — Renders items using predefined visual styles such as card stacks or tinder interfaces. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md))
- [Pagination Indicators](https://awesome-repositories.com/f/user-interface-experience/pagination-indicators.md) — Includes visual pagination indicators that track the current item position relative to the total count. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/README.md))
- [Parallax Effects](https://awesome-repositories.com/f/user-interface-experience/parallax-effects.md) — Implements techniques for creating depth and motion through scroll-based visual effects. ([source](https://github.com/meliorence/react-native-snap-carousel#readme))
- [Scroll-Driven Transitions](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines/scroll-driven-transitions.md) — Calculates dynamic styles based on scroll position to create fluid visual transitions. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/CHANGELOG.md))
- [Pagination Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators/pagination-indicators.md) — Ships visual markers that show the current page position and total count within a paginated layout. ([source](https://github.com/meliorence/react-native-snap-carousel#readme))
- [Scroll-Based Style Interpolations](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/animation-customizations/scroll-based-style-interpolations.md) — Allows mapping the current scroll position to specific style changes for items moving through the interface. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md))
- [Scroll Event Controllers](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-event-controllers.md) — Monitors scroll events to synchronize the active item index and trigger pagination callbacks.
- [Scroll Behavior Control](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-behavior-control.md) — Configures scroll behavior, including momentum and snapping precision, for a refined touch experience. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/CHANGELOG.md))
- [Automated Slide Rotation](https://awesome-repositories.com/f/user-interface-experience/sliding-page-view-components/automated-slide-rotation.md) — Supports automated slide rotation with programmatic controls to start, stop, or resume playback. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md))
- [Variable Slide Sizing](https://awesome-repositories.com/f/user-interface-experience/sliding-page-view-components/variable-slide-sizing.md) — Allows defining custom widths and heights for individual slides to create various layout styles. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md))
- [Vertical Orientation Support](https://awesome-repositories.com/f/user-interface-experience/vertical-orientation-support.md) — Configures the swiper to move items up and down instead of left and right. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/CHANGELOG.md))

### Part of an Awesome List

- [Carousels and Sliders](https://awesome-repositories.com/f/awesome-lists/devtools/carousels-and-sliders.md) — Ships a swipeable content slider for mobile apps with support for custom layouts.
- [Dynamic Image Galleries](https://awesome-repositories.com/f/awesome-lists/devtools/image-and-gallery/dynamic-image-galleries.md) — Implements a high-performance image browser with parallax depth effects and pagination.

### Graphics & Multimedia

- [Slide Transformation Controls](https://awesome-repositories.com/f/graphics-multimedia/custom-animation-effects/slide-transformation-controls.md) — Controls the scale, opacity, and translation of inactive slides using spring or decay animation types. ([source](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md))