Scroll — Kuito Documentation

Scroll a page whose children can all stay mounted. Use it for an article, form or a small set of sections.

Read a page of paragraphs

tsx

import { Scroll, Text } from 'kuito';

const paragraphs = ['The tide came in.', 'It went out again.', 'Nobody noticed.'];

export default function Article() {
  return (
    <Scroll flex={1} padding={16} gap={12}>
      {paragraphs.map((paragraph) => (
        <Text key={paragraph}>{paragraph}</Text>
      ))}
    </Scroll>
  );
}

Behavior

Give the scroll view a bounded height, often with flex={1}. All children are rendered. Use List for large collections. Vertical scroll views can keep focused fields clear of the keyboard.

Props

Prop	Meaning
`horizontal`	Scroll sideways. Changing it remounts the view.
`onScroll`, `scrollInterval`	`{ x, y, contentWidth, contentHeight, layoutWidth, layoutHeight }` in points, at most once per throttle (50 ms by default).
`onScrollEnd`	HTML's `scrollend`: the same fields, where it came to rest after a fling, a drag or a `scrollTo`, once per rest.
`onReachEnd`, `reachEndThreshold`	Once each time the end comes within the threshold, in visible lengths (0.5 by default).
`onRefresh`, `refreshing`	Pull-to-refresh (vertical only).
`scrollbar`	Shows or hides the scrollbar.
`motion`	`scrollMotion()`: its `offset`, `velocity` and `overscroll` move with the view every frame, on the UI thread (follow scrolling).
`paging`, `snapOffsets`	Where a drag comes to rest: whole pages, or the offsets given.
`keyboard`	`{ dismiss, persistTaps, inset, avoid }`: when dragging dismisses the keyboard, what a tap outside the field does, whether content stays clear of it (true by default) (keyboard).

Continue

Read Keyboard for a complete workflow. See the complete prop reference for types and documented defaults.

Reference

Signatures

(props: ScrollProps): KuitoElement

Parameters

Name	Type	Required	Description
`props`	`ScrollProps`	Yes	—

Returns

KuitoElement

Props: ScrollProps

Props (including inherited props) 108

Name	Type	Required	Description
`horizontal`	`Prop<boolean>`	No	Scrolls sideways; changing it remounts the view, as the native axis is fixed.
`ref`	`ElementRef<ScrollHandle>`	No	—
`motion`	`ScrollMotion`	No	Moves with the view every frame on the UI thread: `scrollMotion()`, given to one view.
`onScroll`	`(event: ScrollEvent) => void`	No	—
`onScrollEnd`	`(event: ScrollEndEvent) => void`	No	Where it came to rest: after a fling, a drag or a `scrollTo`, once per rest.
`onReachEnd`	`(event: KuitoEvent<"reachend">) => void`	No	Called once each time the content end comes within the threshold.
`onRefresh`	`(event: KuitoEvent<"refresh">) => void`	No	Enables pull-to-refresh.
`opacity`	`Animatable<number>`	No	—
`backgroundColor`	`Animatable<string>`	No	—
`borderRadius`	`Animatable<number>`	No	—
`borderColor`	`Animatable<string>`	No	—
`width`	`Animatable<SizeValue>`	No	—
`height`	`Animatable<SizeValue>`	No	—
`translateX`	`Animatable<number>`	No	—
`translateY`	`Animatable<number>`	No	—
`scale`	`Animatable<number>`	No	—
`scaleX`	`Animatable<number>`	No	—
`scaleY`	`Animatable<number>`	No	—
`rotate`	`Animatable<number>`	No	Degrees.
`shadowColor`	`Animatable<string>`	No	—
`shadowRadius`	`Animatable<number>`	No	—
`shadowOffsetX`	`Animatable<number>`	No	—
`shadowOffsetY`	`Animatable<number>`	No	—
`hidden`	`Prop<boolean>`	No	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	No	—
`position`	`Prop<"relative" \| "absolute">`	No	—
`children`	`KuitoNode`	No	—
`id`	`string`	No	—
`class`	`Prop<ClassNames>`	No	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	No	Styles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (`opacity`).
`onPress`	`(event: PressEvent) => void`	No	—
`onPressCapture`	`(event: PressEvent) => void`	No	—
`key`	`string \| number`	No	—
`paddingTop`	`Prop<LengthPercentage>`	No	—
`paddingRight`	`Prop<LengthPercentage>`	No	—
`paddingBottom`	`Prop<LengthPercentage>`	No	—
`paddingLeft`	`Prop<LengthPercentage>`	No	—
`minWidth`	`Prop<SizeValue>`	No	—
`maxWidth`	`Prop<SizeValue>`	No	—
`minHeight`	`Prop<SizeValue>`	No	—
`maxHeight`	`Prop<SizeValue>`	No	—
`aspectRatio`	`Prop<number>`	No	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	No	—
`right`	`Prop<LengthPercentageAuto>`	No	—
`bottom`	`Prop<LengthPercentageAuto>`	No	—
`left`	`Prop<LengthPercentageAuto>`	No	—
`margin`	`Prop<LengthPercentageAuto>`	No	—
`marginTop`	`Prop<LengthPercentageAuto>`	No	—
`marginRight`	`Prop<LengthPercentageAuto>`	No	—
`marginBottom`	`Prop<LengthPercentageAuto>`	No	—
`marginLeft`	`Prop<LengthPercentageAuto>`	No	—
`flexGrow`	`Prop<number>`	No	—
`flexShrink`	`Prop<number>`	No	—
`flexBasis`	`Prop<SizeValue \| "content">`	No	—
`flex`	`Prop<number>`	No	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	No	—
`direction`	`Prop<"ltr" \| "rtl">`	No	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	No	—
`paddingInlineStart`	`Prop<LengthPercentage>`	No	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	No	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	No	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	No	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	No	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	No	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	No	—
`onAction`	`(event: AccessibilityActionEvent) => void`	No	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	No	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	No	What a screen reader says for the view.
`hint`	`Prop<string>`	No	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	No	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	No	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	No	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	No	—
`aria-selected`	`Prop<boolean>`	No	—
`aria-checked`	`Prop<boolean \| "mixed">`	No	—
`aria-busy`	`Prop<boolean>`	No	—
`aria-expanded`	`Prop<boolean>`	No	—
`aria-valuemin`	`Prop<number>`	No	—
`aria-valuemax`	`Prop<number>`	No	—
`aria-valuenow`	`Prop<number>`	No	—
`aria-valuetext`	`Prop<string>`	No	—
`gestures`	`readonly Composable[]`	No	The view's gestures; several race unless composed with together or orElse.
`transition`	`Partial<Record<"opacity" \| "backgroundColor" \| "transform" \| "borderRadius" \| "borderColor" \| "shadow" \| "width" \| "height" \| "all", Animation<unknown> \| AnimationSpec>>`	No	How the animatable props move when they change, enter or leave, by group; a CSS `transition` compiles to it.
`animate`	`Partial<Record<AnimatableProps, string \| number>>`	No	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	No	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	No	Where the view leaves to; it stays on screen until it is there. The renderer gets `true`, and keeps the view until `exited`.
`layout`	`Animation<number>`	No	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	No	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	No	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	No	—
`color`	`Prop<string>`	No	—
`sharedId`	`Prop<string>`	No	A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
`alignItems`	`Prop<SelfAlignment>`	No	—
`justifyContent`	`Prop<ContentAlignment>`	No	—
`gap`	`Prop<LengthPercentage>`	No	—
`rowGap`	`Prop<LengthPercentage>`	No	—
`columnGap`	`Prop<LengthPercentage>`	No	—
`flexDirection`	`Prop<"row" \| "column" \| "row-reverse" \| "column-reverse">`	No	—
`flexWrap`	`Prop<"nowrap" \| "wrap" \| "wrap-reverse" \| "balance">`	No	—
`flexLineCount`	`Prop<number>`	No	The minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
`alignContent`	`Prop<ContentAlignment>`	No	—
`scrollInterval`	`Prop<number>`	No	At most one scroll event per this many milliseconds; 50 by default.
`reachEndThreshold`	`Prop<number>`	No	Distance from the end, in visible lengths, that counts as the end; 0.5 by default.
`refreshing`	`Bound<boolean>`	No	Shows the pull-to-refresh spinner while true.
`scrollbar`	`Prop<boolean>`	No	Shows the scrollbar while scrolling; true by default.
`paging`	`Prop<boolean>`	No	Comes to rest a whole view length at a time; false by default.
`snapOffsets`	`Prop<readonly number[]>`	No	Offsets in points where a drag comes to rest, besides the start and the end; ignored while paging.
`keyboard`	`Prop<{ dismiss?: "none" \| "on-drag" \| "interactive"; persistTaps?: "never" \| "always" \| "handled"; inset?: boolean; avoid?: "none" \| "padding" \| "position";}>`	No	—

onScroll — method signatures

Signatures

(event: ScrollEvent): void

Parameters

Name	Type	Required	Description
`event`	`ScrollEvent`	Yes	—

Returns

void

onScrollEnd — method signatures

Signatures

(event: ScrollEndEvent): void

Parameters

Name	Type	Required	Description
`event`	`ScrollEndEvent`	Yes	—

Returns

void

onReachEnd — method signatures

Signatures

(event: KuitoEvent<"reachend">): void

Parameters

Name	Type	Required	Description
`event`	`KuitoEvent<"reachend">`	Yes	—

Returns

void

onRefresh — method signatures

Signatures

(event: KuitoEvent<"refresh">): void

Parameters

Name	Type	Required	Description
`event`	`KuitoEvent<"refresh">`	Yes	—

Returns

void

onPress — method signatures

Signatures

(event: PressEvent): void

Parameters

Name	Type	Required	Description
`event`	`PressEvent`	Yes	—

Returns

void

onPressCapture — method signatures

Signatures

(event: PressEvent): void

Parameters

Name	Type	Required	Description
`event`	`PressEvent`	Yes	—

Returns

void

onAction — method signatures

Signatures

(event: AccessibilityActionEvent): void

Parameters

Name	Type	Required	Description
`event`	`AccessibilityActionEvent`	Yes	—

Returns

void

backgroundGradient — nested fields

backgroundGradient fields

Name	Type	Required	Description
`angle`	`number`	Yes	—
`colors`	`string[]`	Yes	—

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.

#Read a page of paragraphs

#Behavior

#Props

#Continue

Reference

Signatures

Parameters

Returns

Props (including inherited props) 108

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

Signatures

Parameters

Returns

backgroundGradient fields

Read a page of paragraphs

Behavior

Props

Continue