FieldElementProps

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 DOM form controls with browser-managed values, 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. If such a component supports focus, forwarding its ref registers it so that focus can reach it, while onFocus and onBlur preserve the touched and blurred validation behavior.

The ref callback registers the native component instance. FieldElement 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.