# rn-docyrus-data-source-picker
URL: /docs/native/docyrus/docyrus-data-source-picker

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.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-docyrus-data-source-picker
```

**Dependencies:**
- [@docyrus/api-client](https://www.npmjs.com/package/@docyrus/api-client)
- [@docyrus/app-utils](https://www.npmjs.com/package/@docyrus/app-utils)
- [@tanstack/react-query](https://www.npmjs.com/package/@tanstack/react-query)
- [@shopify/flash-list](https://www.npmjs.com/package/@shopify/flash-list)

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

## Usage

```tsx
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 (
    
        ) : null
      )}
    
  );
}
```

### How it works

1. 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.
2. 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.
3. **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 |