DocyrusDataSourcePicker

Picks a Docyrus data source (apps → data sources tree) and a sample record, then exposes a JSON Schema plus JSONata / Handlebars context paths through a render prop — API-aligned with the web DocyrusDataSourcePicker.

Edit on GitHubEditllms.txt

iOSAndroid

Preview DocyrusDataSourcePicker 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-docyrus-data-source-picker

Required Packages(4 packages)

pnpm add @docyrus/api-client @docyrus/app-utils @tanstack/react-query @shopify/flash-list

Requires a signed-in RestApiClient and a QueryClientProvider above it (the record list uses useInfiniteQuery).

Usage

import { Text } from 'react-native';

import { useDocyrusClient } from '@docyrus/signin/react-native';

import { DocyrusDataSourcePicker } from '@/components/docyrus-native/docyrus-data-source-picker';

export function SampleDataPicker() {
  const client = useDocyrusClient();

  if (!client) return null;

  return (
    <DocyrusDataSourcePicker client={client}>
      {({ hasSelection, recordText, jsonataContextPaths }) => (
        hasSelection ? (
          <Text selectable>
            {recordText || jsonataContextPaths.map(path => path.path).join('\n')}
          </Text>
        ) : null
      )}
    </DocyrusDataSourcePicker>
  );
}

How it works

A TreeSelect (leafOnly, showBreadcrumb) lists apps → data sources. The tree is loaded lazily the first time the sheet opens (createDataSourceClient(client).listApps() + listByAppSlug()); apps without data sources are hidden.
Picking a data source loads its fields (getBySlug(app, slug, { expand: 'fields' })), builds a JSON Schema with useDocyrusDataSourceJsonSchema and derives context paths with jsonSchemaToContextPaths — items[0].name for JSONata and items.[0].name for Handlebars.
Select record opens an internal RecordPickerSheet (the native replacement for the web dialog + useDocyrusDataTable): a search box (filterKeyword), a reload button and a paged FlashList (20 records per page, infinite scroll) loaded from /v1/apps/<app>/data-sources/<slug>/items with every field as a column and relation / enum / user fields expanded. Each row shows the record name (or title / autonumber / id) plus a secondary text field. Tapping a row selects it.

API Reference

DocyrusDataSourcePickerProps

Prop	Type	Default	Description
`client`	`RestApiClient`	-	Authenticated Docyrus API client
`schemaTitle`	`string`	data source slug	Title of the generated JSON Schema root
`dialogTitle`	`string`	`t('ui.dataSourcePicker.dialogTitle', 'Select a record')`	Record picker sheet title
`className`	`string`	-	Additional classes for the root container
`children`	`(props: DocyrusDataSourcePickerRenderProps) => ReactNode`	-	Render prop receiving the schema-derived context and the selected record

DocyrusDataSourcePickerRenderProps

Field	Type	Description
`schema`	`JsonSchema \| null`	Selected source's fields as a JSON Schema — `null` until a source with fields is picked
`selectedDataSource`	`DataSource \| null`	Selected data source detail (incl. `id`)
`jsonataContextPaths`	`ContextPath[]`	JSONata-style paths (`items[0].name`)
`handlebarsContextPaths`	`ContextPath[]`	Handlebars-style paths (`items.[0].name`)
`selectedRecord`	`Record<string, unknown> \| null`	Record picked in the sheet
`recordText`	`string`	Pretty-printed JSON of `selectedRecord` (`''` when none)
`hasSelection`	`boolean`	`true` once a data source is picked and its field list is non-empty

ContextPath

Field	Type	Description
`path`	`string`	Dotted path inserted into an expression / template
`type`	`string`	Optional type label (`string`, `number`, `object[]`, …)
`description`	`string`	Optional description (field description or title)
`label`	`string`	Optional human-readable label

ContextPath, normalizeContextPaths and jsonSchemaToContextPaths live in lib/context-paths (a verbatim copy of the web helper, installed with the component).

Translation keys

Same keys as web: ui.dataSourcePicker.placeholder, ui.dataSourcePicker.loading, ui.dataSourcePicker.search, ui.dataSourcePicker.fieldsBadge, ui.dataSourcePicker.selectRecord, ui.dataSourcePicker.changeRecord, ui.dataSourcePicker.dialogTitle, ui.dataSourcePicker.selectButton. Native additions: ui.dataSourcePicker.searchRecords, ui.dataSourcePicker.reload, ui.dataSourcePicker.noRecords.

Components

Component	Description
`DocyrusDataSourcePicker`	Data source + record picker with render prop

Type Exports

Type	Description
`DocyrusDataSourcePickerProps`	Props for `DocyrusDataSourcePicker`
`DocyrusDataSourcePickerRenderProps`	Render-prop payload

DocyrusDataSourcePicker

On this page