Usage

Scroll a list in a test.

This type is used by List

tsx
// Scroll a list in a test.
import { List, Text } from 'kuito';
import { assert, render, screen, scroll, test } from 'kuito/tests';

const rows = Array.from({ length: 200 }, (_, index) => `Row ${index}`);

const Long = () => <List data={rows} renderItem={({ item }) => <Text height={44}>{item}</Text>} />;

test('rows far down bind once the list scrolls to them', async () => {
  await render(<Long />);

  assert.equal(screen.queryByText('Row 150'), null);

  await scroll(screen.getByText('Row 0'), { y: 150 * 44 });

  assert.ok(screen.getByText('Row 150'));
});

Type declaration

ts
export interface ListProps<T> extends Omit<
  ScrollProps,
  'children' | 'ref' | 'paging' | 'snapOffsets' | 'onScrollEnd'
> {
  /** The items, or a signal of them. */
  data: Prop<readonly T[]>;
  renderItem: (info: ListItem<T>) => KuitoNode;
  /** A unique key per item; defaults to `item.key`, then `item.id`, then the index. */
  itemKey?: (item: T, index: number) => string;
  /** The item's section: each run of items with the same section gets a header row. */
  sectionKey?: (item: T, index: number) => string;
  /** Renders a section's header row, given its section and its first item. */
  renderSection?: (info: { section: string; item: T }) => KuitoNode;
  /** Section headers stay at the top while their section scrolls under them; vertical lists only. */
  stickySections?: boolean;
  separator?: Slot;
  header?: Slot;
  footer?: Slot;
  /** Rendered instead of the rows when `data` is empty. */
  empty?: Slot;
  /** Lays items out in rows of this many; `gap` spaces both directions. */
  columns?: number;
  /** Starts at the end, with the first item at the bottom (or the right). */
  inverted?: boolean;
  /** Scrolls to this item when the list first shows it; no `getItemLayout` needed. */
  initialIndex?: number;
  /** The length of a row not measured yet; the average measured row by default. */
  estimatedItemSize?: number;
  onViewableChange?: (info: {
    viewableItems: ViewableItem<T>[];
    changed: ViewableItem<T>[];
  }) => void;
  viewability?: Viewability;
  ref?: ElementRef<ListHandle>;
}

Members 120

NameTypeRequiredDescription
dataProp<readonly T[]>YesThe items, or a signal of them.
renderItem(info: ListItem<T>) => KuitoNodeYes—
itemKey(item: T, index: number) => stringNoA unique key per item; defaults to item.key, then item.id, then the index.
sectionKey(item: T, index: number) => stringNoThe item's section: each run of items with the same section gets a header row.
renderSection(info: { section: string; item: T;}) => KuitoNodeNoRenders a section's header row, given its section and its first item.
stickySectionsbooleanNoSection headers stay at the top while their section scrolls under them; vertical lists only.
separatorSlotNo—
headerSlotNo—
emptySlotNoRendered instead of the rows when data is empty.
columnsnumberNoLays items out in rows of this many; gap spaces both directions.
invertedbooleanNoStarts at the end, with the first item at the bottom (or the right).
initialIndexnumberNoScrolls to this item when the list first shows it; no getItemLayout needed.
estimatedItemSizenumberNoThe length of a row not measured yet; the average measured row by default.
onViewableChange(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}) => voidNo—
viewabilityViewabilityNo—
refElementRef<ListHandle>No—
scrollbarProp<boolean>NoShows the scrollbar while scrolling; true by default.
opacityAnimatable<number>No—
backgroundColorAnimatable<string>No—
borderRadiusAnimatable<number>No—
borderColorAnimatable<string>No—
widthAnimatable<SizeValue>No—
heightAnimatable<SizeValue>No—
translateXAnimatable<number>No—
translateYAnimatable<number>No—
scaleAnimatable<number>No—
scaleXAnimatable<number>No—
scaleYAnimatable<number>No—
rotateAnimatable<number>NoDegrees.
shadowColorAnimatable<string>No—
shadowRadiusAnimatable<number>No—
shadowOffsetXAnimatable<number>No—
shadowOffsetYAnimatable<number>No—
hiddenProp<boolean>NoTakes the view out of layout and off screen, as CSS display: none.
paddingProp<LengthPercentage>No—
positionProp<"relative" | "absolute">No—
idstringNo—
classProp<ClassNames>NoClass names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
styleStyleDeclarationsNoStyles 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) => voidNo—
onPressCapture(event: PressEvent) => voidNo—
keystring | numberNo—
paddingTopProp<LengthPercentage>No—
paddingRightProp<LengthPercentage>No—
paddingBottomProp<LengthPercentage>No—
paddingLeftProp<LengthPercentage>No—
minWidthProp<SizeValue>No—
maxWidthProp<SizeValue>No—
minHeightProp<SizeValue>No—
maxHeightProp<SizeValue>No—
aspectRatioProp<number>NoWidth divided by height; sizes the missing side from the other.
topProp<LengthPercentageAuto>No—
rightProp<LengthPercentageAuto>No—
bottomProp<LengthPercentageAuto>No—
leftProp<LengthPercentageAuto>No—
marginProp<LengthPercentageAuto>No—
marginTopProp<LengthPercentageAuto>No—
marginRightProp<LengthPercentageAuto>No—
marginBottomProp<LengthPercentageAuto>No—
marginLeftProp<LengthPercentageAuto>No—
flexGrowProp<number>No—
flexShrinkProp<number>No—
flexBasisProp<SizeValue | "content">No—
flexProp<number>NoA grow factor from a zero basis, as CSS flex: n; 0 is inflexible.
alignSelfProp<"auto" | SelfAlignment>No—
directionProp<"ltr" | "rtl">NoThe way lines run; unset, the parent's, and the app's first language's at the root.
boxSizingProp<"border-box" | "content-box">No—
paddingInlineStartProp<LengthPercentage>NoPadding on the side lines start from: the left in ltr, the right in rtl.
paddingInlineEndProp<LengthPercentage>NoPadding on the side lines end at: the right in ltr, the left in rtl.
marginInlineStartProp<LengthPercentageAuto>NoMargin on the side lines start from: the left in ltr, the right in rtl.
marginInlineEndProp<LengthPercentageAuto>NoMargin on the side lines end at: the right in ltr, the left in rtl.
insetInlineStartProp<LengthPercentageAuto>Noleft in ltr, right in rtl.
insetInlineEndProp<LengthPercentageAuto>Noright in ltr, left in rtl.
roleProp<Role>No—
onAction(event: AccessibilityActionEvent) => voidNoThe screen reader action taken, by name.
accessibleProp<boolean>NoMakes the view one screen reader element, read as its label or its children's text.
labelProp<string>NoWhat a screen reader says for the view.
hintProp<string>NoWhat happens when the view is activated, read after the label.
aria-hiddenProp<boolean>NoScreen readers skip the view and its subtree.
actionsProp<readonly AccessibilityAction[]>NoActions a screen reader offers; onAction receives the one taken.
liveProp<"off" | "polite" | "assertive">NoARIA's aria-live: announces changes to the view's content, on iOS too.
aria-disabledProp<boolean>No—
aria-selectedProp<boolean>No—
aria-checkedProp<boolean | "mixed">No—
aria-busyProp<boolean>No—
aria-expandedProp<boolean>No—
aria-valueminProp<number>No—
aria-valuemaxProp<number>No—
aria-valuenowProp<number>No—
aria-valuetextProp<string>No—
gesturesreadonly Composable[]NoThe view's gestures; several race unless composed with together or orElse.
transitionPartial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>>NoHow the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it.
animatePartial<Record<AnimatableProps, string | number>>NoAnimatable props whose every change moves as transition says; the first value applies at once.
enterEffectNoWhere the view enters from: fade.and(slide.up(12)).
exitProp<Effect>NoWhere the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited.
layoutAnimation<number>NoHow the view moves to a new frame the layout gives it: layout={spring()}.
overflowProp<"visible" | "hidden" | "clip" | "scroll">Nohidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
borderWidthProp<number>No—
backgroundGradient{ angle: number; colors: string[];}No—
colorProp<string>No—
sharedIdProp<string>NoA 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).
alignItemsProp<SelfAlignment>No—
justifyContentProp<ContentAlignment>No—
gapProp<LengthPercentage>No—
rowGapProp<LengthPercentage>No—
columnGapProp<LengthPercentage>No—
flexDirectionProp<"row" | "column" | "row-reverse" | "column-reverse">No—
flexWrapProp<"nowrap" | "wrap" | "wrap-reverse" | "balance">No—
flexLineCountProp<number>NoThe minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
alignContentProp<ContentAlignment>No—
keyboardProp<{ dismiss?: "none" | "on-drag" | "interactive"; persistTaps?: "never" | "always" | "handled"; inset?: boolean; avoid?: "none" | "padding" | "position";}>No—
horizontalProp<boolean>NoScrolls sideways; changing it remounts the view, as the native axis is fixed.
motionScrollMotionNoMoves with the view every frame on the UI thread: scrollMotion(), given to one view.
onScroll(event: ScrollEvent) => voidNo—
onReachEnd(event: KuitoEvent<"reachend">) => voidNoCalled once each time the content end comes within the threshold.
onRefresh(event: KuitoEvent<"refresh">) => voidNoEnables pull-to-refresh.
scrollIntervalProp<number>NoAt most one scroll event per this many milliseconds; 50 by default.
reachEndThresholdProp<number>NoDistance from the end, in visible lengths, that counts as the end; 0.5 by default.
refreshingBound<boolean>NoShows the pull-to-refresh spinner while true.
renderItem — method signatures

Signatures

ts
(info: ListItem<T>): KuitoNode

Parameters

NameTypeRequiredDescription
infoListItem<T>Yes—

Returns

KuitoNode

itemKey — method signatures

Signatures

ts
(item: T, index: number): string

Parameters

NameTypeRequiredDescription
itemTYes—
indexnumberYes—

Returns

string

sectionKey — method signatures

Signatures

ts
(item: T, index: number): string

Parameters

NameTypeRequiredDescription
itemTYes—
indexnumberYes—

Returns

string

renderSection — method signatures

Signatures

ts
(info: { section: string; item: T; }): KuitoNode

Parameters

NameTypeRequiredDescription
info{ section: string; item: T;}Yes—

Returns

KuitoNode

onViewableChange — method signatures

Signatures

ts
(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[]; }): void

Parameters

NameTypeRequiredDescription
info{ viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}Yes—

Returns

void

onPress — method signatures

Signatures

ts
(event: PressEvent): void

Parameters

NameTypeRequiredDescription
eventPressEventYes—

Returns

void

onPressCapture — method signatures

Signatures

ts
(event: PressEvent): void

Parameters

NameTypeRequiredDescription
eventPressEventYes—

Returns

void

onAction — method signatures

Signatures

ts
(event: AccessibilityActionEvent): void

Parameters

NameTypeRequiredDescription
eventAccessibilityActionEventYes—

Returns

void

backgroundGradient — nested fields

backgroundGradient fields

NameTypeRequiredDescription
anglenumberYes—
colorsstring[]Yes—
onScroll — method signatures

Signatures

ts
(event: ScrollEvent): void

Parameters

NameTypeRequiredDescription
eventScrollEventYes—

Returns

void

onReachEnd — method signatures

Signatures

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

Parameters

NameTypeRequiredDescription
eventKuitoEvent<"reachend">Yes—

Returns

void

onRefresh — method signatures

Signatures

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

Parameters

NameTypeRequiredDescription
eventKuitoEvent<"refresh">Yes—

Returns

void

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