# Lightbox

Photo gallery where any tapped photo grows out of its exact tile into a full-screen viewer, then flies back into the tile of whichever photo is showing when you let it go.

> Composed · Pro · Mobile-Native — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/lightbox
```

## Import

```tsx
import { LightboxProvider, useLightbox, LightboxImage } from "@/components/ui/lightbox/lightbox";
```

## Variants

- `feed` — Photo feed: `npx @lumioui/cli add pro/lightbox-feed`
- `listing` — Listing gallery: `npx @lumioui/cli add pro/lightbox-listing`

## Props

### LightboxProvider

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactNode` | — |
| `onOpen?` | `(gallery: string, index: number) => void` | Fires when the viewer opens a photo (gallery, index). |
| `filmstrip?` | `boolean` | Thumbnail filmstrip along the bottom of the viewer for galleries of  3+ photos — it scrubs with the swipe; tap a thumb to jump. Default true. |

### LightboxImage

| Prop | Type | Notes |
| --- | --- | --- |
| `source` | `ImageSourcePropType` | — |
| `fullSource?` | `ImageSourcePropType` | Larger source for the full-screen viewer. Default: `source`. |
| `gallery?` | `string` | Photos sharing a gallery page together in the viewer. Default: its own. |
| `index?` | `number` | Order within the gallery. Default 0. |
| `radius?` | `number` | Tile corner radius in pt — the zoom rounds out of it. Default 16. |
| `aspectRatio?` | `number` | Photo aspect (w / h) for a pixel-perfect morph when the tile crops it. |
| `caption?` | `string` | Caption shown under the photo in the viewer (swaps in place as you page). |
| `className?` | `string` | Size / layout classes for the tile (e.g. "h-48 w-full"). |
| `style?` | `StyleProp<ViewStyle>` | — |
| `accessibilityLabel?` | `string` | Screen-reader label, e.g. "Living room, photo 2 of 8". Also describes  the photo in the viewer when there is no caption. |
| `children?` | `React.ReactNode` | Overlay content drawn on top of the photo (badges, captions). |
| `onPress?` | `() => void` | Called on tap, alongside opening the viewer. |
| `onLongPress?` | `() => void` | Long-press handler (e.g. open a Save / Share / Hide menu). A long-press  never opens the viewer. Fires a medium haptic. |
| `lit?` | `boolean` | Hero tile: in dark scheme it carries a 1px lit top edge (LitEdge).  Use on the one lead photo of a screen, not every grid square. Default false. |

Source: https://lumioui.com/components/lightbox