EditableValue

Field-aware inline editor — renders the value, then edits it with the field's own control (inline input or picker sheet).

Edit on GitHubEditllms.txt

iOSAndroid

Preview EditableValue on your device

Scan with Expo Go

iOS Android

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

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-editable-value

Usage

import { EditableValue } from '@/components/docyrus-native/editable-value';

<EditableValue
  field={{ id: 'stage', slug: 'stage', name: 'Stage', type: 'field-select' }}
  value={record.stage}
  record={record}
  enumOptions={stageOptions}
  onValueChange={value => save({ stage: value })}
  editHint="visible" />

{/* Money: the currency companion arrives through onCompanionChange */}
<EditableValue
  field={{ id: 'budget', slug: 'budget', name: 'Budget', type: 'field-money' }}
  value={record.budget}
  record={record}
  onValueChange={value => save({ budget: value })}
  onCompanionChange={changes => save(changes)} />

{/* Legacy plain-text mode (no field) */}
<EditableValue value={title} onValueChange={setTitle} placeholder="Tap to edit..." />

Behaviour

Field kind	Tap	Commit
`field-checkbox`, `field-switch`	Toggles in place	Immediately
`field-rating`	Opens the stars	On change
Single pickers (`select`, `enum`, `status`, `relation`, `userSelect`, `date`, `dateRange`, `color`, `icon`, `locationSelect`, `queryBuilder`)	Opens the field's sheet straight away (`autoOpen`)	On selection; dismissing cancels
Multi pickers (`multiSelect`, `tagSelect`, `userMultiSelect`) and compound fields (`money`, `phone`, `duration`, `currency`, `dateTime`, `time`)	Opens the editor	Explicit ✓ / ✕ (forced)
Text-like (`text`, `number`, `email`, `password`, `url`, `percent`, `code`)	Inline input	Blur / return (or ✓ with `showActions`)

API Reference

EditableValueProps

Prop	Type	Default	Description
`field`	`IField`	—	Field definition — picks the renderer and the editor. Omit for legacy plain-text mode
`value`	`unknown`	—	Current value (required)
`onValueChange`	`(value: unknown) => void`	—	Committed value
`onCompanionChange`	`(changes: Record<string, unknown>) => void`	—	Companion changes on commit (`{ __budget_currency: 'EUR' }`)
`record`	`Record<string, unknown>`	—	Full record (companion values)
`enumOptions`	`EnumOption[]`	—	Options for select-based fields
`disabled`	`boolean`	`false`	Prevent entering edit mode
`readOnly`	`boolean`	`false`	Show the value without an edit affordance
`editHint`	`'progressive' \| 'visible'`	`'progressive'`	`visible` always shows a pencil hint
`children`	`ReactNode`	—	Custom display content (overrides `DocyValueDynamic`)
`showActions`	`boolean`	text: `false`, others: `true`	✓ / ✕ buttons while editing (forced for multi / compound fields)
`explicitSave`	`boolean`	`false`	Blur does not save (forced for multi / compound fields)
`editing`	`boolean`	—	Controlled editing state
`onEditingChange`	`(editing: boolean) => void`	—	Editing state change
`trackChanges`	`boolean`	`false`	Apply changed styling
`changed`	`boolean`	`false`	Mark as changed
`appSlug` / `dataSourceSlug`	`string`	—	Dynamic enum loading context
`client`	`RestApiClient`	—	Threaded into renderer / editor
`variant`	`'default' \| 'ghost'`	`'default'`	Row chrome
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Row size
`placeholder`	`string`	`ui.editableValue.placeholder`	Legacy mode: empty placeholder
`multiline`	`boolean`	`false`	Legacy mode: multiline input
`onLoadMore` / `hasMore` / `onSearch` / `searching`	—	—	Picker pagination / remote search
`onCreateRecord` / `renderCreateForm` / `itemTemplate`	—	—	Relation create / option template
`onImageUpload` / `onFileUpload`	`FieldUploadHandler`	—	Upload handlers
`onExpand` / `renderExpandContent` / `expandIcon`	—	—	Relation expand
`onComposeEmail` / `onSendMessage`	`(address: string) => void`	—	Email / phone actions
`className`	`string`	—	Additional classes

Not ported from web: the external TanStack form prop (native fields are controlled) and the ref prop.

Exports

Export	Description
`EditableValue`	Component
`editableValueVariants`	`tv()` variants
`EditableValueProps`	Props type

Breaking changes (web-parity release)

value / onValueChange are unknown (were string); pass field for typed editing.
showActions defaults to false for text-like fields (was true for everything); legacy mode keeps actions on.
Default placeholder copy comes from ui.editableValue.placeholder (“Tap to edit...”).