Snap Carousel

A horizontal carousel that settles on one card at a time. The centered card is full size and opaque, its neighbors shrink and fade with the scroll position, and the dots below stretch to follow. Tap a dot or a neighboring card to go there. The dots row doubles as an adjustable control for screen readers, and on desktop the cards can be dragged with a mouse. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add snap-carousel

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/snap-carousel.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { Text } from "react-native";
import { SnapCarousel } from "@/components/ui/snap-carousel";

const places = [
  { id: "ridge", name: "Ridge Cabin" },
  { id: "harbor", name: "Harbor Loft" },
  { id: "orchard", name: "Orchard House" },
];

export default function Example() {
  return (
    <SnapCarousel
      data={places}
      keyExtractor={(place) => place.id}
      renderItem={(place) => <Text style={{ padding: 24, fontSize: 20 }}>{place.name}</Text>}
      onIndexChange={(index) => console.log(index)}
    />
  );
}

The carousel is as wide as its parent and as tall as its tallest card. Give the cards a background, since the carousel draws none.

Props