Scrollable - EXPRESSO Docs

scrollable lets the user drag content in one direction. Its style.spacing is the gap between direct scroll items in the scroll direction. Use padding for edge spacing so that space remains part of the scrollable content.

Properties

Property	Accepted value	Description
`horizontal`	`boolean`	Scroll horizontally when `true`; otherwise scroll vertically.
`snap`	`boolean`	Snap children to a position while scrolling.
`snapPosition`	`"start" \| "center" \| "end"`	Alignment used when snapping.
`userScrollEnabled`	`boolean`	Enables or disables dragging. Defaults to enabled.
`style`	`StyleProperties`	Layout and appearance values.
`children`	`ReactNode`	Scrollable content.
`key`	`string \| number`	React key for dynamic scrollables.
`class`	`string`	Registered style name for this node only.

Example

<scrollable
  horizontal
  style={{ paddingStart: 16, paddingEnd: 16, spacing: 12 }}
>
  {products.map((product) => (
    <box key={product.id} style={{ width: 160, height: 220 }}>
      <text>{product.title}</text>
    </box>
  ))}
</scrollable>

Prefer paddingStart and paddingEnd over margins on the scrollable itself. Margins reduce the usable scroll area.