expo-coverflow-carousel

iPod-style Cover Flow carousel for React Native.

✨ Features

• 🎠 True Cover Flow perspective — cards rotate on the Y axis and stack in 3D space; the centered cover flattens to face you while its neighbors tilt away
• 🪞 Live Skia reflections — each cover casts a real mirrored, gradient-faded, blurred reflection rendered by a react-native-skia runtime shader, not a static image
• 👆 Pan to scroll, tap to select — flick through the deck with momentum, or tap any side cover to spring it to center
• 📐 Responsive layout engine — card size, spacing, tilt, and reflection height are all derived from screen width (or an explicit size), so it looks right on any device
• 🖼️ expo-image under the hood — memory-disk caching, transitions, and recycling keys for smooth, flicker-free covers
• 🧠 TypeScript-first, fully typed surface

⚙️ Installation

git clone https://github.com/rit3zh/expo-coverflow-carousel
cd expo-coverflow-carousel
bun install
bun start -c

Peer dependencies (already wired up in this template):

bun add react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-worklets @shopify/react-native-skia expo-image

🚀 Usage

Wrap your app once with GestureHandlerRootView and SafeAreaProvider, then drop a `` anywhere in the tree.

// app/_layout.tsx
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function RootLayout() {
  return (
    
      
        
      
    
  );
}

The simplest possible carousel — a backdrop and a deck of covers:

import { Coverflow } from "@/components";
import { albums } from "@/data/albums";

export function Example() {
  return (
    
      
      
    
  );
}

Preview

https://github.com/user-attachments/assets/23ac1880-5d08-4b67-bfa5-77246213c3ab

The album shape

albums is any array matching the Album interface. Only image_url is required to render a cover — the rest powers your own now-playing UI.

interface Album {
  position: number;
  title: string;
  artists: string;
  album: string;
  image_url: string;
}

Reacting to the active cover

onIndexChange fires whenever the deck settles on a new cov