Stacked Card Carousel

A pile of cards you swipe through one at a time. Tap the front card and it glides open to fill the screen.

Or get it with Pro

By buying you agree to the Terms and Licence. All sales are final.

Features

Swipe the front card away and it flies off with a twist
Cards behind rise, grow and sharpen into place
Tap the front card and it glides open to fill the screen
Put anything on a card, from a photo to a full article
Pick a loose, fanned or flat pile, or fine-tune every detail
Swiping runs on the UI thread, so it keeps up with your finger

Built with

Reanimated
Expo Blur
Native ScrollView

Installation

1Install dependencies

npx expo install react-native-reanimated react-native-worklets expo-blur

2Run a development build (expo-blur is a native module)

npx expo run:ios   # or: npx expo run:android

Usage

The articles from the demo app: each card shows its author, title, image and summary.

import { Image, StyleSheet, Text, View } from 'react-native';
import {
  StackedCardCarousel,
  type StackedCardRenderInfo,
} from '@/components/stacked-card-carousel';

type Article = {
  id: string;
  title: string;
  summary: string;
  image: string;
  author: { name: string; avatar: string };
};

const ARTICLES: Article[] = [
  {
    id: '0',
    title: 'Remote Work Is Quietly Creating Two Classes of Employees',
    summary: 'Visibility bias is becoming the new office politics.',
    image:
      'https://i.pinimg.com/736x/2c/3d/ec/2c3dec02a37ef4c8de29be8e5e6748b3.jpg',
    author: {
      name: 'Dev Malhotra',
      avatar:
        'https://i.pinimg.com/1200x/03/cb/79/03cb796b5478e7b690487d9c21f98e7f.jpg',
    },
  },
  {
    id: '1',
    title: 'The Affordability Crisis That Could Crush Startup Founders in 2026',
    summary:
      'Rising rent, SaaS inflation, and shrinking runway are squeezing early-stage builders.',
    image:
      'https://i.pinimg.com/736x/62/9b/6e/629b6e6d060aa984cbdf48b585a39724.jpg',
    author: {
      name: 'Kabir Verma',
      avatar:
        'https://i.pinimg.com/736x/2f/d1/bb/2fd1bb7b5ca02435b88182fa3c2324d0.jpg',
    },
  },
  {
    id: '2',
    title:
      'The Wrong Business Partner Can Turn Your Dream Empire Into a Battlefield',
    summary: 'Skill gaps can be fixed. Character gaps usually can’t.',
    image:
      'https://i.pinimg.com/736x/83/15/79/8315790bad04f7dd892ebc20b1c550ab.jpg',
    author: {
      name: 'Riya Sharma',
      avatar:
        'https://i.pinimg.com/1200x/5f/86/3c/5f863ca5cffb43ffbd8c46becbc8bf34.jpg',
    },
  },
];

const CARD_STYLE = { backgroundColor: '#ffffff' };

function ArticleCard({ item }: StackedCardRenderInfo<Article>) {
  return (
    <View style={styles.card}>
      <View style={styles.author}>
        <Image source={{ uri: item.author.avatar }} style={styles.avatar} />
        <Text style={styles.name}>{item.author.name}</Text>
      </View>
      <Text style={styles.title} numberOfLines={2}>
        {item.title}
      </Text>
      <Image source={{ uri: item.image }} style={styles.image} />
      <Text style={styles.summary} numberOfLines={2}>
        {item.summary}
      </Text>
    </View>
  );
}

export function Feed() {
  return (
    <StackedCardCarousel
      data={ARTICLES}
      keyExtractor={(article) => article.id}
      renderCard={ArticleCard}
      cardStyle={CARD_STYLE}
      accessibilityLabel="Articles"
    />
  );
}

const styles = StyleSheet.create({
  card: { flex: 1, gap: 12, padding: 12 },
  author: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  avatar: { width: 40, height: 40, borderRadius: 20 },
  name: { fontSize: 15, fontWeight: '600' },
  title: { fontSize: 20, fontWeight: '700' },
  image: { flex: 1, borderRadius: 16 },
  summary: { fontSize: 14, color: '#666666' },
});

How it works

A see-through, horizontal ScrollView on top reads the swipe, so flicks and snapping feel native. The cards sit in a layer underneath and move only by transforms, so they never lag a frame behind your finger. Each card's distance from the front picks its lift, size, tilt and blur, and tapping the front card eases it open to fill the carousel.

More once you own it

Examples, the full list of props and every advanced option for Stacked Card Carousel are here for owners.

Next componentRolling Carousel