Skip to content
Native Animation
MusicPicker3DGestureStack

react native stacked cards

Record Stack Picker

A tactile vertical record picker that lifts the centered sleeve from a perspective stack and reveals a spinning vinyl disc.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI.

npx nativeanimation add record-stack-picker

About this animation

React Native stacked cards can turn a small collection into a tactile picker without hiding every option behind a flat list. This component arranges record sleeves in a vertical perspective stack, lifts the centered card into a front-facing view, and reveals a spinning disc behind it. Use the pattern for albums, collectible cards, artwork, saved items, or any visual selection where opening the choice should feel consequential. Gesture Handler drives direct vertical movement with decay and edge resistance, while one continuous Reanimated value controls position, tilt, scale, veil, visibility, and layer order. Expo Image handles the covers. Provide your own records, copy, colors, and fonts, listen for open and dismiss events, or sequence selection through the imperative API.

When to use it

  • Browse albums or collectible artwork.
  • Choose an item from a perspective stack.
  • Open the centered card into a detailed state.
  • Sequence a picker from imperative controls.

A tactile vertical record picker that lifts the centered sleeve from a perspective stack and reveals a spinning vinyl disc.

How it works

  1. The component measures its container and sizes the stack, type, spacing, and open state proportionally.
  2. One continuous scroll shared value drives every sleeve's vertical position, perspective tilt, scale, veil, visibility, and layer order.
  3. A vertical pan updates that value directly, decays with edge resistance, and then springs to the nearest record.
  4. Opening a record interpolates its sleeve from the stack to a front-facing presentation while a grooved vinyl disc slides out behind it.
  5. A short touch ring confirms selection before the extraction begins, and the imperative API supports sequenced product demos.

Install

npx expo install expo-image expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import RecordStackPicker from './RecordStackPicker';

export function MusicScreen() {
  return (
    <RecordStackPicker
      records={[
        {
          cover: require('./assets/album.jpg'),
          title: 'Morning Shapes',
          artist: 'North Arcade',
        },
      ]}
    />
  );
}

Customize its message, palette, fonts, callbacks, and external controls:

import { useRef } from 'react';
import RecordStackPicker, { type RecordStackPickerRef } from './RecordStackPicker';

export function CollectionScreen() {
  const pickerRef = useRef<RecordStackPickerRef>(null);

  return (
    <RecordStackPicker
      ref={pickerRef}
      records={collection}
      caption="Choose a sleeve for tonight."
      backgroundColor="#080706"
      fontFamily="YourSansFont"
      titleFontFamily="YourDisplayFont"
      onSelect={(index) => saveSelection(index)}
      onDismiss={() => clearPreview()}
    />
  );
}

The forwarded ref exposes scrollTo(index), open(index), and close().

Props

PropTypeDefaultDescription
recordsRecordItem[]RequiredRecord covers, titles, artists, and optional vinyl-label accents.
captionstring'Your music, pressed on vinyl. Pick a record to start.'Large supporting message.
backgroundColorstring'#050505'Scene background color.
fontFamilystringSystem fontArtist-name font.
titleFontFamilystringSystem fontRecord-title and caption font.
onSelect(index: number) => void—Called when a record opens.
onDismiss() => void—Called when the open record closes.
styleStyleProp<ViewStyle>—Outer-container style.
testIDstring—Test identifier for the outer container.

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5 and Worklets 0.10
  • iOS: supported, not yet verified on a device
  • Android: supported, not yet verified on a device
  • Web: supported, not yet verified
  • Works in Expo Go because its native dependencies are included in the SDK

Accessibility

The stack exposes adjustable increment and decrement actions with the centered record's title and artist. Every sleeve is also a labeled button. Reduced Motion removes the entrance drop and vinyl rotation, and uses 200 ms fades for opening and closing.

FAQ

Does the stacked card picker work in Expo Go?
Yes. Expo Image, Gesture Handler, Reanimated, and Worklets are included with Expo SDK 57. iOS, Android, and web are supported but remain visually unverified.
Can I use it for something other than records?
The public item model is record-oriented, with cover, title, artist, and optional disc accents. Its colors, caption, fonts, callbacks, and open, close, and scrollTo controls are configurable.
How is the stack exposed to assistive technology?
It supports adjustable actions and announces the centered title and artist; every sleeve is also a labeled button. Reduce Motion removes the drop and rotation and uses short fades.

More animations