SchemaRepeater

A generic repeater component for managing dynamic lists of items with reordering, adding, and removing capabilities.

iOSAndroid

Preview SchemaRepeater on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-schema-repeater

Usage

import { SchemaRepeater } from '@/components/docyrus-native/schema-repeater';

type LineItem = { id: string; name: string; quantity: number };

<SchemaRepeater<LineItem>
  value={items}
  onValueChange={setItems}
  createItem={() => ({ id: String(Date.now()), name: '', quantity: 1 })}
  renderItem={(item, index, helpers) => (
    <TextInput
      value={item.name}
      onChangeText={(text) => helpers.update({ name: text })}
    />
  )}
/>

API Reference

SchemaRepeaterProps<T>

Prop	Type	Default	Description
`value`	`T[]`	—	Array of items to render. Each item must have an `id: string` field
`onValueChange`	`(items: T[]) => void`	—	Called when items are added, removed, reordered, or updated
`renderItem`	`(item: T, index: number, helpers: SchemaRepeaterHelpers<T>) => ReactNode`	—	Render function for each item. Receives the item, its index, and helper functions
`createItem`	`() => T`	—	Factory function to create a new item when the add button is pressed
`maxItems`	`number`	—	Maximum number of items allowed. Add button hides when reached
`minItems`	`number`	`0`	Minimum number of items required. Remove button disables when reached
`addLabel`	`string`	`ui.schemaRepeater.add` (“Add”)	Label text for the add button
`disabled`	`boolean`	`false`	Disables all interactions including add, remove, and reorder
`className`	`string`	—	Additional CSS classes

SchemaRepeaterItem

Field	Type	Description
`id`	`string`	Unique identifier required for each item

SchemaRepeaterHelpers<T>

Field	Type	Description
`remove`	`() => void`	Removes the current item
`update`	`(updates: Partial<T>) => void`	Partially updates the current item
`moveUp`	`() => void`	Moves the current item up by one position
`moveDown`	`() => void`	Moves the current item down by one position
`isFirst`	`boolean`	Whether this is the first item in the list
`isLast`	`boolean`	Whether this is the last item in the list

field-schemaRepeater forms use DocyFieldSchemaRepeater from @docyrus/rn-form-fields — rows of IField sub-fields rendered through DocyFieldDynamic (schema mode) or key / value pairs, with move up / down, duplicate and collapsible rows. See Form Fields.

Type Exports

Type	Description
`SchemaRepeaterProps<T>`	Props for SchemaRepeater component
`SchemaRepeaterItem`	Base interface for repeater items (requires `id`)
`SchemaRepeaterHelpers<T>`	Helper object passed to renderItem callback