Component

Parallax Carousel

A full-width, paging image carousel with a parallaxing background.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Gallery.tsx

import { ParallaxCarousel } from "react-native-foonto";
import { Image, Text, View } from "react-native";

const SLIDES = [
  { id: "1", uri: "https://picsum.photos/id/10/1200", title: "Kyoto" },
  { id: "2", uri: "https://picsum.photos/id/20/1200", title: "Santorini" },
];

export function Gallery() {
  return (
    <ParallaxCarousel
      data={SLIDES}
      height={440}
      renderItem={(item) => (
        <Image source={{ uri: item.uri }} style={{ width: "100%", height: "100%" }} />
      )}
      renderOverlay={(item) => (
        <View style={{ flex: 1, justifyContent: "flex-end", padding: 24 }}>
          <Text style={{ color: "#fff", fontSize: 32, lineHeight: 38, fontWeight: "800" }}>
            {item.title}
          </Text>
        </View>
      )}
    />
  );
}

Props

Prop	Type	Default	Description
`data`req	`T[]`	—	Items, one full-width page each.
`renderItem`req	`(item: T, index: number) => ReactNode`	—	Render the parallaxing background.
`renderOverlay`	`(item: T, index: number) => ReactNode`	—	Optional non-parallaxing overlay (e.g. a caption).
`height`	`number`	420	Page height in px.
`intensity`	`number`	0.3	How far the background shifts relative to the page (0–1).
`onIndexChange`	`(index: number) => void`	—	Fired with the page 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 full-width parallax image carousel using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` are installed.
2. Import `ParallaxCarousel` from `react-native-foonto`.
3. Pass a `data` array; in `renderItem` return an Image that fills the page ("100%" x "100%").
4. Add captions via `renderOverlay` (these stay put while the background drifts).
5. Set `height` to your art and tune `intensity` for a stronger or subtler parallax.