Pager - EXPRESSO Docs

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

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.