This is the React Native adapter for haloform. It re-exports useForm and useMultiStepForm from @haloform/react and adds prop mappers that convert field handles into React Native component props.

Install

npm install @haloform/core @haloform/native

@haloform/native includes @haloform/react as a dependency — you don't need to install it separately.

Quick Start

import { createForm, f } from "@haloform/core";
import { useForm, toTextInputProps, toSwitchProps } from "@haloform/native";
import { TextInput, Switch, View, Text, Button } from "react-native";

const schema = createForm({
  name: f.text({ required: true }),
  email: f.email({ required: true }),
  agreed: f.checkbox(),
});

function MyForm() {
  const { fields, handleSubmit } = useForm(schema);

  return (
    <View>
      <TextInput {...toTextInputProps(fields.name)} placeholder="Name" />
      {fields.name.error && <Text style={{ color: "red" }}>{fields.name.error}</Text>}

      <TextInput {...toTextInputProps(fields.email)} placeholder="Email" keyboardType="email-address" />
      {fields.email.error && <Text style={{ color: "red" }}>{fields.email.error}</Text>}

      <Switch {...toSwitchProps(fields.agreed)} />

      <Button title="Submit" onPress={handleSubmit((v) => console.log(v))} />
    </View>
  );
}

Prop Mappers

toTextInputProps(field)

Maps a string FieldHandle to React Native TextInput props.

<TextInput {...toTextInputProps(fields.name)} placeholder="Name" />

| Mapped Prop | From | |---|---| | value | field.value | | onChangeText | field.onChange | | onBlur | field.onBlur | | editable | !field.disabled |

Also passes through: error, touched, dirty, disabled, visible, validating.

toSwitchProps(field)

Maps a boolean FieldHandle to React Native Switch props.

<Switch {...toSwitchProps(fields.agreed)} />

| Mapped Prop | From | |---|---| | value | field.value | | onValueChange | field.onChange | | disabled | field.disabled |

toNumberInputProps(field)

Maps a number FieldHandle to TextInput props with automatic number conversion.

<TextInput keyboardType="numeric" {...toNumberInputProps(fields.age)} />

| Mapped Prop | From | |---|---| | value | String(field.value) | | numericValue | field.value (original number) | | onChangeText | Parses string to number, ignores NaN | | editable | !field.disabled |

Re-exported Hooks

This package re-exports everything from @haloform/react:

• useForm(schema) — Single-step form hook
• useMultiStepForm(schema) — Multi-step form hook with navigation

See the @haloform/react docs for the full hook API.

Full Documentation

See the full documentation and examples on GitHub.

License

MIT — Made with care by Angel Orellana