How to do uncontrolled input in react native

[mattiaferrari02]

Hi, i'm trying a simple thing

const { register, handleSubmit, formState: { errors } } = useForm()

  const onSubmit = (data: any) => {
    console.log("HERE", data)
  }

  console.log("Errors:", errors)
  
  
  return <View>

  <TextInput
            {...register("email", { required: "Email is required" })}
          />
  <Button className={"mt-8"} title={"Login"} onPress={handleSubmit(onSubmit)}/>
</View>

Why i can never arrive at onSubmit and i keep getting

{"email": {"message": "Email is required", "ref": {"__internalInstanceHandle": [FiberNode], "__nativeTag": 406, "_viewConfig": [Object], "clear": [Function clear], "getNativeRef": [Function getNativeRef], "isFocused": [Function isFocused], "setSelection": [Function setSelection]}, "type": "required"}}

I'm using
"react": "19.1.0",
"react-hook-form": "^7.66.0",
"react-native": "0.81.5",

Am I missing something?
Thanks in advance!

[AshkanPoyber]

Hi @mattiaferrari02,

You’re not missing anything — this is expected behavior in React Native.

register() only works with native HTML inputs (web).
In React Native, TextInput does NOT support register directly, so the value
is never tracked and validation always fails.

That’s why email stays undefined and onSubmit is never called.

✅ Correct way in React Native: use Controller

import { Controller, useForm } from "react-hook-form";

const { control, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data: any) => {
  console.log("HERE", data);
};

return (
  <View>
    <Controller
      control={control}
      name="email"
      rules={{ required: "Email is required" }}
      render={({ field: { onChange, value } }) => (
        <TextInput
          value={value}
          onChangeText={onChange}
        />
      )}
    />

    {errors.email && <Text>{errors.email.message}</Text>}

    <Button title="Login" onPress={handleSubmit(onSubmit)} />
  </View>
);

Summary

• register() ❌ does not work with TextInput in React Native
• Controller ✅ is required to bridge controlled components
• Validation errors you’re seeing are expected in your current setup

This applies regardless of React 19 or RHF version.

[chrisjcthomas]

In React Native, the TextInput component does not have the same DOM interface as web input elements.

React Hook Form's standard {...register("email")} returns web-specific props (like onChange, onBlur, ref, and name) that React Native components do not know how to handle (for instance, React Native uses onChangeText instead of onChange). As a result, the input value is never captured by the form, causing validation to always fail with "Email is required".

The idiomatic way to bind uncontrolled inputs in React Native is by using the Controller wrapper component.

Here is the corrected code:

import React from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';
import { useForm, Controller } from 'react-hook-form';

export default function LoginForm() {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      email: ''
    }
  });

  const onSubmit = (data: any) => {
    console.log("Submitted data:", data);
  };

  return (
    <View style={styles.container}>
      <Controller
        control={control}
        name="email"
        rules={{ required: "Email is required" }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={styles.input}
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            placeholder="Email Address"
            autoCapitalize="none"
            keyboardType="email-address"
          />
        )}
      />
      
      {errors.email && (
        <Text style={styles.errorText}>{errors.email.message}</Text>
      )}

      <Button title="Login" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 16 },
  input: { borderBottomWidth: 1, marginBottom: 8, padding: 8 },
  errorText: { color: 'red', marginBottom: 8 }
});