# FieldElementProps

> This document is the Markdown version of [formisch.dev/react-native/api/FieldElementProps/](https://formisch.dev/react-native/api/FieldElementProps/). For the complete documentation index, see [llms.txt](https://formisch.dev/llms.txt).

Props to spread onto a field element for integration with React Native form handling.

## Definition

- `FieldElementProps`
  - `ref` `((element: FieldElement | null) => void | (() => void))`
  - `onFocus` `() => void`
  - `onBlur` `() => void`
  - `onChangeText` `(text: string) => void`

### Explanation

The props are spread onto a `TextInput` to connect it to the form. Since React Native has no native form elements, inputs are controlled. Therefore, always pass `value={field.input}` alongside the spread props. The `onChangeText` handler updates the field input whenever the text changes.

Non-text components such as `Switch`, sliders and pickers do not report text, so spreading these props is not enough to connect them: pass their value from `field.input` and their change handler to the field store's `onChange` method instead. The `ref` and the `onFocus` and `onBlur` handlers can still be forwarded to make such a component focusable and to keep its touched and blurred state.

The `ref` callback registers the native component instance. [`FieldElement`](/react-native/api/FieldElement.md) is a structural subset of the imperative methods of React Native host component instances, so refs of `TextInput` and other focusable native components are accepted. On React 19 the callback returns a cleanup function that unregisters the exact element, while React 18 calls the callback with `null` instead.