Component

Carousel

A center-focused, snapping carousel (Hotstar / App Store style).

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Featured.tsx

import { Carousel } from "react-native-foonto";
import { Image } from "react-native";

const DATA = [
  { id: "1", uri: "https://picsum.photos/id/10/600/800" },
  { id: "2", uri: "https://picsum.photos/id/20/600/800" },
  { id: "3", uri: "https://picsum.photos/id/30/600/800" },
];

export function Featured() {
  return (
    <Carousel
      data={DATA}
      itemHeight={360}
      onIndexChange={(i) => console.log("centered", i)}
      renderItem={(item) => (
        <Image source={{ uri: item.uri }} style={{ flex: 1, borderRadius: 24 }} />
      )}
    />
  );
}

Props

Prop	Type	Default	Description
`data`req	`T[]`	—	Items to render.
`renderItem`req	`(item: T, index: number) => ReactNode`	—	Render one card's content.
`itemWidth`	`number`	70% screen	Card width in px.
`itemHeight`	`number`	360	Card height in px.
`spacing`	`number`	16	Gap between cards in px.
`sideScale`	`number`	0.86	Scale of the side (non-focused) cards.
`sideOpacity`	`number`	0.6	Opacity of the side cards.
`onIndexChange`	`(index: number) => void`	—	Fired with the centered card index after a snap.
`style`	`FoontoStyle`	—	Style for the scroll view.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add a center-focused snapping carousel using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` are installed.
2. Import `Carousel` from `react-native-foonto`.
3. Pass a `data` array and a `renderItem` returning a full-bleed card (image/poster).
4. Set `itemHeight` (and optionally `itemWidth`); tune `sideScale` / `sideOpacity` for the focus effect.
5. Use `onIndexChange` to track the centered item (e.g. for a caption or dots).