Usage with React Native

TanStack Form is headless and it should support React Native out-of-the-box without needing any additional configuration.

Here is an example:

tsx
<form.Field
  name="age"
  validators={{
    onChange: (val) =>
      val < 13 ? 'You must be 13 to make an account' : undefined,
  }}
>
  {(field) => (
    <>
      <Text>Age:</Text>
      <TextInput value={field.state.value} onChangeText={field.handleChange} />
      {field.state.meta.errors ? (
        <Text>{field.state.meta.errors.join(', ')}</Text>
      ) : null}
    </>
  )}
</form.Field>
<form.Field
  name="age"
  validators={{
    onChange: (val) =>
      val < 13 ? 'You must be 13 to make an account' : undefined,
  }}
>
  {(field) => (
    <>
      <Text>Age:</Text>
      <TextInput value={field.state.value} onChangeText={field.handleChange} />
      {field.state.meta.errors ? (
        <Text>{field.state.meta.errors.join(', ')}</Text>
      ) : null}
    </>
  )}
</form.Field>
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.