I'm creating a mobile app with React Native and I need to use a form. I want to use react-hook-form, but I can't get it to work, even in a newly created project. I did the following:
- Created new React Native projects: it runs as it should
- npm install react-hook-form
- copy-paste following code to App.js:
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
console.log(watch("example")); // watch input value by passing the name of it
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input defaultValue="test" {...register("example")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
}
It gives following error: screenshot of emulator I have no idea what's the problem. Is there something wrong with the installation of react-hook-form as it doesn't recognize the input field?
Thanks!