Color Variant Carousel

A gesture-driven product carousel that synchronizes product imagery, copy, and a full-screen color field.

How it works

1. One Reanimated shared value represents the carousel's continuous position.
2. Each product image and variant name derives its wrapped distance from that position, so the carousel loops without duplicating data.
3. Background and foreground colors interpolate between the current and incoming variants.
4. A horizontal pan updates progress directly on the UI thread and settles with an interruptible spring.
5. The imperative API uses the same spring path, allowing controls and autoplay to stay outside the component.

Install

npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets

Mount your app under GestureHandlerRootView as described by React Native Gesture Handler.

Usage

import { VariantCarousel } from './VariantCarousel';

const variants = [
  {
    name: 'Sand',
    image: require('./sand.png'),
    backgroundColor: '#C8B49B',
    brandColor: '#FFF5E8',
    textColor: '#201B17',
    secondaryColor: 'rgba(32,27,23,0.6)',
  },
  {
    name: 'Ocean',
    image: require('./ocean.png'),
    backgroundColor: '#365D73',
    brandColor: '#D7ECF5',
    textColor: '#FFFFFF',
    secondaryColor: 'rgba(255,255,255,0.6)',
  },
];

export function ProductScreen() {
  return <VariantCarousel variants={variants} />;
}

Customize the measured motion and content with knobs:

<VariantCarousel
  actionLabel="Reserve"
  brandName="NORTH"
  onIndexChange={(index) => setSelectedVariant(index)}
  priceLabel="$189.00"
  productSizeRatio={1.15}
  springDamping={24}
  springStiffness={160}
  variants={variants}
/>

Props

The forwarded ref exposes goTo(index), next(), and prev().

Compatibility

• Expo SDK 57, React Native 0.86, Reanimated 4.5, and Worklets 0.10.
• Web: verified.
• iOS and Android: bundles verified; physical devices not yet verified.
• Works in Expo Go because all native dependencies are included in the SDK 57 client.

Accessibility

The next-variant touch target exposes a button role, label, and hint. Dragging is not the only way to advance. When reduced motion is enabled, spatial product and name movement is removed while the selected content and colors still update.