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.