# Usage with React Native

TanStack Form is headless, so React Native uses the same form and validation
APIs. Connect the field handlers to the props exposed by native controls.

```tsx
import { Button, Text, TextInput, View } from 'react-native'
import { useForm } from '@tanstack/react-form'

export function AccountForm() {
  const form = useForm({
    defaultValues: { age: '' },
    onSubmit: ({ value }) => console.log(value),
  })

  return (
    <View>
      <form.Field
        name="age"
        validators={[
          {
            triggers: ['change', 'blur'],
            run: ({ value }) =>
              Number(value) >= 13 ? undefined : 'You must be at least 13',
          },
        ]}
      >
        {(field) => (
          <View>
            <Text>Age</Text>
            <TextInput
              value={field.value}
              keyboardType="number-pad"
              onBlur={field.handleBlur}
              onChangeText={field.handleChange}
            />
            {field.errors.map((error) => (
              <Text key={error.message} accessibilityRole="alert">
                {error.message}
              </Text>
            ))}
          </View>
        )}
      </form.Field>

      <Button title="Submit" onPress={() => void form.handleSubmit()} />
    </View>
  )
}
```

React Native has no DOM form submission or `querySelector`. Call
`form.handleSubmit()` from a button and keep refs to native inputs when you need
to focus an invalid field.