explaingit

meliorence/react-native-snap-carousel

★ 10,520JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((Snap Carousel))
    What it does
      Swipeable items
      Snap positioning
      Parallax images
    Layout Styles
      Flat horizontal
      Stack card deck
      Tinder swipe
    Features
      Pagination dots
      Custom animations
      FlatList rendering
    Audience
      React Native devs
      Mobile app builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a swipeable image gallery in a React Native app where photos snap into place and pagination dots show the current slide

USE CASE 2

Create a Tinder-style swipe-through card interface for a product catalog or app onboarding screen

USE CASE 3

Add a stacked card deck animation to a mobile app where cards fan out as the user scrolls through them

USE CASE 4

Display a horizontal content carousel with parallax depth effects on item images for a polished mobile UI

Tech stack

JavaScriptReact Native

Getting it running

Difficulty · easy Time to first run · 30min

Stack and Tinder layouts render all items at once, avoid using them with large data sets as performance degrades.

In plain English

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.

Copy-paste prompts

Prompt 1
Using react-native-snap-carousel, build a horizontal carousel that shows 3 items with the center card slightly enlarged. Include the Pagination component with dots below. Show the full component code.
Prompt 2
How do I implement the stack layout in react-native-snap-carousel so cards appear fanned out like a physical deck? Show me the full component with sample data and the required props.
Prompt 3
I want a Tinder-style swipe carousel in my React Native app. Show me how to configure the tinder layout in react-native-snap-carousel and handle the snap event to know which item is now active.
Prompt 4
My react-native-snap-carousel with the stack layout is slow with 100+ items. What does the library say about why this happens, and which layout should I switch to for better performance with large lists?
Open on GitHub → Explain another repo

← meliorence on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.