foontofoonto

Component

Masonry Grid

A balanced multi-column masonry layout with a staggered reveal.

Preview

How to useAI prompt

How to use

Minimal, copy-pasteable code.

Feed.tsx
import { ScrollView } from "react-native";
import { View } from "react-native";
import { MasonryGrid } from "react-native-foonto";

const ITEMS = [
  { id: "1", height: 160, color: "#6d28d9" },
  { id: "2", height: 220, color: "#2563eb" },
  { id: "3", height: 120, color: "#16a34a" },
  { id: "4", height: 200, color: "#f59e0b" },
];

export function Feed() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <MasonryGrid
        data={ITEMS}
        keyExtractor={(it) => it.id}
        getHeight={(it) => it.height}
        columns={2}
        spacing={12}
        renderItem={(it) => (
          <View style={{ flex: 1, borderRadius: 16, backgroundColor: it.color }} />
        )}
      />
    </ScrollView>
  );
}

Props

PropTypeDefaultDescription
datareqT[]—Items to lay out.
keyExtractorreq(item: T) => string—Stable unique key for an item.
renderItemreq(item: T, columnWidth: number) => ReactNode—Render one cell.
getHeightreq(item: T, columnWidth: number) => number—Cell height for the column width (drives layout).
columnsnumber2Number of columns.
spacingnumber12Gap between cells in px.
staggernumber60Stagger (ms) between each cell's entrance.
styleFoontoStyle—Style for the grid.

AI prompt

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

AI prompt
Add a masonry grid using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` are installed.
2. Import `MasonryGrid` from `react-native-foonto` and place it inside a vertical ScrollView.
3. Pass `data`, a stable `keyExtractor`, and a `getHeight` that returns each cell's height for the given column width.
4. Render the cell in `renderItem` (it fills the resolved column width).
5. Set `columns` and `spacing`; items flow into the shortest column and fade up with a stagger.