List — Kuito Documentação

Render a large collection with native scrolling and recycled cells. Use it for feeds, catalogs, grids and chat histories.

Render 500 tracks

tsx

import { Divider, List, Text } from 'kuito';

const tracks = Array.from({ length: 500 }, (_, index) => ({
  id: String(index),
  title: `Track ${index + 1}`,
}));

export default function Tracks() {
  return (
    <List
      flex={1}
      data={tracks}
      itemKey={(track) => track.id}
      renderItem={({ item }) => <Text padding={16}>{item.title}</Text>}
      separator={Divider}
      empty={<Text>No tracks yet</Text>}
    />
  );
}

Behavior

Provide a stable itemKey. renderItem receives the item plus reactive index and visible values. Use empty, separator, header and footer slots for surrounding content. Avoid putting a vertical list inside another vertical scroll view.

Continue

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

Referência

Assinaturas

<T>(props: ListProps<T>): KuitoNode

Parâmetros de tipo

Nome	Restrição	Predefinição
`T`	—	—

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`props`	`ListProps<T>`	Sim	—

Devolve

KuitoNode

Props: ListProps<T>

Props (incluindo props herdadas) 120

Nome	Tipo	Obrigatório	Descrição
`data`	`Prop<readonly T[]>`	Sim	The items, or a signal of them.
`renderItem`	`(info: ListItem<T>) => KuitoNode`	Sim	—
`itemKey`	`(item: T, index: number) => string`	Não	A unique key per item; defaults to `item.key`, then `item.id`, then the index.
`sectionKey`	`(item: T, index: number) => string`	Não	The item's section: each run of items with the same section gets a header row.
`renderSection`	`(info: { section: string; item: T;}) => KuitoNode`	Não	Renders a section's header row, given its section and its first item.
`stickySections`	`boolean`	Não	Section headers stay at the top while their section scrolls under them; vertical lists only.
`separator`	`Slot`	Não	—
`header`	`Slot`	Não	—
`footer`	`Slot`	Não	—
`empty`	`Slot`	Não	Rendered instead of the rows when `data` is empty.
`columns`	`number`	Não	Lays items out in rows of this many; `gap` spaces both directions.
`inverted`	`boolean`	Não	Starts at the end, with the first item at the bottom (or the right).
`initialIndex`	`number`	Não	Scrolls to this item when the list first shows it; no `getItemLayout` needed.
`estimatedItemSize`	`number`	Não	The length of a row not measured yet; the average measured row by default.
`onViewableChange`	`(info: { viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}) => void`	Não	—
`viewability`	`Viewability`	Não	—
`ref`	`ElementRef<ListHandle>`	Não	—
`scrollbar`	`Prop<boolean>`	Não	Shows the scrollbar while scrolling; true by default.
`opacity`	`Animatable<number>`	Não	—
`backgroundColor`	`Animatable<string>`	Não	—
`borderRadius`	`Animatable<number>`	Não	—
`borderColor`	`Animatable<string>`	Não	—
`width`	`Animatable<SizeValue>`	Não	—
`height`	`Animatable<SizeValue>`	Não	—
`translateX`	`Animatable<number>`	Não	—
`translateY`	`Animatable<number>`	Não	—
`scale`	`Animatable<number>`	Não	—
`scaleX`	`Animatable<number>`	Não	—
`scaleY`	`Animatable<number>`	Não	—
`rotate`	`Animatable<number>`	Não	Degrees.
`shadowColor`	`Animatable<string>`	Não	—
`shadowRadius`	`Animatable<number>`	Não	—
`shadowOffsetX`	`Animatable<number>`	Não	—
`shadowOffsetY`	`Animatable<number>`	Não	—
`hidden`	`Prop<boolean>`	Não	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Não	—
`position`	`Prop<"relative" \| "absolute">`	Não	—
`id`	`string`	Não	—
`class`	`Prop<ClassNames>`	Não	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	Não	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`	Não	—
`onPressCapture`	`(event: PressEvent) => void`	Não	—
`key`	`string \| number`	Não	—
`paddingTop`	`Prop<LengthPercentage>`	Não	—
`paddingRight`	`Prop<LengthPercentage>`	Não	—
`paddingBottom`	`Prop<LengthPercentage>`	Não	—
`paddingLeft`	`Prop<LengthPercentage>`	Não	—
`minWidth`	`Prop<SizeValue>`	Não	—
`maxWidth`	`Prop<SizeValue>`	Não	—
`minHeight`	`Prop<SizeValue>`	Não	—
`maxHeight`	`Prop<SizeValue>`	Não	—
`aspectRatio`	`Prop<number>`	Não	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	Não	—
`right`	`Prop<LengthPercentageAuto>`	Não	—
`bottom`	`Prop<LengthPercentageAuto>`	Não	—
`left`	`Prop<LengthPercentageAuto>`	Não	—
`margin`	`Prop<LengthPercentageAuto>`	Não	—
`marginTop`	`Prop<LengthPercentageAuto>`	Não	—
`marginRight`	`Prop<LengthPercentageAuto>`	Não	—
`marginBottom`	`Prop<LengthPercentageAuto>`	Não	—
`marginLeft`	`Prop<LengthPercentageAuto>`	Não	—
`flexGrow`	`Prop<number>`	Não	—
`flexShrink`	`Prop<number>`	Não	—
`flexBasis`	`Prop<SizeValue \| "content">`	Não	—
`flex`	`Prop<number>`	Não	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	Não	—
`direction`	`Prop<"ltr" \| "rtl">`	Não	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	Não	—
`paddingInlineStart`	`Prop<LengthPercentage>`	Não	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	Não	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	Não	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	Não	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	Não	—
`onAction`	`(event: AccessibilityActionEvent) => void`	Não	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	Não	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	Não	What a screen reader says for the view.
`hint`	`Prop<string>`	Não	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	Não	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	Não	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	Não	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	Não	—
`aria-selected`	`Prop<boolean>`	Não	—
`aria-checked`	`Prop<boolean \| "mixed">`	Não	—
`aria-busy`	`Prop<boolean>`	Não	—
`aria-expanded`	`Prop<boolean>`	Não	—
`aria-valuemin`	`Prop<number>`	Não	—
`aria-valuemax`	`Prop<number>`	Não	—
`aria-valuenow`	`Prop<number>`	Não	—
`aria-valuetext`	`Prop<string>`	Não	—
`gestures`	`readonly Composable[]`	Não	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>>`	Não	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>>`	Não	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	Não	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	Não	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>`	Não	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	Não	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	Não	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	Não	—
`color`	`Prop<string>`	Não	—
`sharedId`	`Prop<string>`	Não	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>`	Não	—
`justifyContent`	`Prop<ContentAlignment>`	Não	—
`gap`	`Prop<LengthPercentage>`	Não	—
`rowGap`	`Prop<LengthPercentage>`	Não	—
`columnGap`	`Prop<LengthPercentage>`	Não	—
`flexDirection`	`Prop<"row" \| "column" \| "row-reverse" \| "column-reverse">`	Não	—
`flexWrap`	`Prop<"nowrap" \| "wrap" \| "wrap-reverse" \| "balance">`	Não	—
`flexLineCount`	`Prop<number>`	Não	The minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
`alignContent`	`Prop<ContentAlignment>`	Não	—
`keyboard`	`Prop<{ dismiss?: "none" \| "on-drag" \| "interactive"; persistTaps?: "never" \| "always" \| "handled"; inset?: boolean; avoid?: "none" \| "padding" \| "position";}>`	Não	—
`horizontal`	`Prop<boolean>`	Não	Scrolls sideways; changing it remounts the view, as the native axis is fixed.
`motion`	`ScrollMotion`	Não	Moves with the view every frame on the UI thread: `scrollMotion()`, given to one view.
`onScroll`	`(event: ScrollEvent) => void`	Não	—
`onReachEnd`	`(event: KuitoEvent<"reachend">) => void`	Não	Called once each time the content end comes within the threshold.
`onRefresh`	`(event: KuitoEvent<"refresh">) => void`	Não	Enables pull-to-refresh.
`scrollInterval`	`Prop<number>`	Não	At most one scroll event per this many milliseconds; 50 by default.
`reachEndThreshold`	`Prop<number>`	Não	Distance from the end, in visible lengths, that counts as the end; 0.5 by default.
`refreshing`	`Bound<boolean>`	Não	Shows the pull-to-refresh spinner while true.

renderItem — assinaturas de método

Assinaturas

(info: ListItem<T>): KuitoNode

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`info`	`ListItem<T>`	Sim	—

Devolve

KuitoNode

itemKey — assinaturas de método

Assinaturas

(item: T, index: number): string

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`item`	`T`	Sim	—
`index`	`number`	Sim	—

Devolve

string

sectionKey — assinaturas de método

Assinaturas

(item: T, index: number): string

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`item`	`T`	Sim	—
`index`	`number`	Sim	—

Devolve

string

renderSection — assinaturas de método

Assinaturas

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`info`	`{ section: string; item: T;}`	Sim	—

Devolve

KuitoNode

onViewableChange — assinaturas de método

Assinaturas

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`info`	`{ viewableItems: ViewableItem<T>[]; changed: ViewableItem<T>[];}`	Sim	—

Devolve

void

onPress — assinaturas de método

Assinaturas

(event: PressEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`PressEvent`	Sim	—

Devolve

void

onPressCapture — assinaturas de método

Assinaturas

(event: PressEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`PressEvent`	Sim	—

Devolve

void

onAction — assinaturas de método

Assinaturas

(event: AccessibilityActionEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`AccessibilityActionEvent`	Sim	—

Devolve

void

backgroundGradient — campos aninhados

backgroundGradient campos

Nome	Tipo	Obrigatório	Descrição
`angle`	`number`	Sim	—
`colors`	`string[]`	Sim	—

onScroll — assinaturas de método

Assinaturas

(event: ScrollEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`ScrollEvent`	Sim	—

Devolve

void

onReachEnd — assinaturas de método

Assinaturas

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`KuitoEvent<"reachend">`	Sim	—

Devolve

void

onRefresh — assinaturas de método

Assinaturas

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`KuitoEvent<"refresh">`	Sim	—

Devolve

void

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.

#Render 500 tracks

#Behavior

#Continue

Referência

Assinaturas

Parâmetros de tipo

Parâmetros

Devolve

Props (incluindo props herdadas) 120

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

backgroundGradient campos

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Render 500 tracks

Behavior

Continue