> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Pager

`pager` presents children as pages and can report the focused page as it changes. Its
`style.spacing` is the distance between page bounds; use the page's own padding for inner content.

## Properties

| Property                | Accepted value                 | Description                                               |
| ----------------------- | ------------------------------ | --------------------------------------------------------- |
| `horizontal`            | `boolean`                      | Page horizontally when `true`; otherwise page vertically. |
| `snapPosition`          | `"start" \| "center" \| "end"` | Alignment used when snapping pages.                       |
| `itemSize`              | `number \| string`             | Page size in pixels or a percentage such as `"80%"`.      |
| `userScrollEnabled`     | `boolean`                      | Enables or disables user paging.                          |
| `onFocusedIndexUpdated` | `(index: number) => void`      | Called continuously as the focused page changes.          |
| `style`                 | `StyleProperties`              | Layout and appearance values.                             |
| `children`              | `ReactNode`                    | Page content.                                             |
| `key`                   | `string \| number`             | React key for dynamic pagers.                             |
| `class`                 | `string`                       | Registered style name for this node only.                 |

## Example

```tsx theme={null}
const [focusedPage, setFocusedPage] = useState(0);

<pager
  horizontal
  itemSize="84%"
  snapPosition="center"
  onFocusedIndexUpdated={setFocusedPage}
  style={{ spacing: 12, paddingStart: 16, paddingEnd: 16 }}
>
  {slides.map((slide) => (
    <box key={slide.id} style={{ height: 220, borderRadius: 16 }}>
      <img src={slide.image} alt={slide.title} resizeMode="cover" />
    </box>
  ))}
</pager>
```

Use padding rather than margins for the pager’s outer edge spacing.