Component

Stack Cards

A wallet-style card stack — swipe up or tap to cycle.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Wallet.tsx

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

const CARDS = [
  { id: "1", name: "Platinum", color: "#6d28d9" },
  { id: "2", name: "Travel", color: "#0ea5e9" },
  { id: "3", name: "Cashback", color: "#16a34a" },
];

export function Wallet() {
  return (
    <StackCards
      data={CARDS}
      cardHeight={200}
      renderCard={(item) => (
        <View style={{ flex: 1, borderRadius: 20, padding: 20, backgroundColor: item.color }}>
          <Text style={{ color: "#fff", fontSize: 22, fontWeight: "800" }}>{item.name}</Text>
        </View>
      )}
    />
  );
}

Props

Prop	Type	Default	Description
`data`req	`T[]`	—	Items to stack.
`renderCard`req	`(item: T, index: number) => ReactNode`	—	Render one card's content.
`visibleCount`	`number`	3	How many cards are visible in the stack.
`offset`	`number`	18	Vertical offset (px) between stacked cards.
`scaleStep`	`number`	0.06	Scale reduction per card deeper in the stack.
`cardHeight`	`number`	200	Fixed card height in px.
`onCycle`	`(frontIndex: number) => void`	—	Fired when the front card changes.
`style`	`FoontoStyle`	—	Style for the stack container.

AI prompt

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

AI prompt

Add a wallet-style card stack using the `react-native-foonto` library.

1. Make sure `react-native-foonto`, `react-native-reanimated`, and `react-native-gesture-handler` are installed and the app root is wrapped in `<GestureHandlerRootView>`.
2. Import `StackCards` from `react-native-foonto`.
3. Pass a `data` array and a `renderCard` returning a styled card View.
4. Set `cardHeight`, and optionally `visibleCount` to control stack depth.
5. The front card flies up and tucks to the back on swipe-up or tap — set `visibleCount` to your data length if you want every layer visible.