Scroller

Horizontal scroller with edge gradients and controls

Import: import { Scroller } from 'react-native-mantine';

Usage

import { Scroller } from 'react-native-mantine';

// Controls appear once content overflows
<Scroller scrollAmount={200} controlSize={32}>
  {items.map((item) => (
    <Badge key={item}>{item}</Badge>
  ))}
</Scroller>

// Edge gradients only, no control buttons
<Scroller withControls={false}>
  {/* ... */}
</Scroller>

Props

Prop	Type	Default	Description
`children`	`ReactNode`		Scrollable content
`scrollAmount`	`number`	`200`	Number of px scrolled when a control is pressed
`controlSize`	`number`	`32`	Size of the scroll controls in px
`edgeGradientColor`	`string`		Color of the edge gradients, defaults to theme background
`withEdgeGradients`	`boolean`	`true`	Determines whether the edge gradients should be displayed
`withControls`	`boolean`	`true`	Determines whether the scroll controls should be displayed
`startControlIcon`	`ReactNode`		Icon of the start control
`endControlIcon`	`ReactNode`		Icon of the end control
`startControlLabel`	`string`	`"Scroll back"`	Start control accessibility label
`endControlLabel`	`string`	`"Scroll forward"`	End control accessibility label

Source on GitHub · npm