I'm currently working on a mobile application using react-native, focusing on the login page.
My goal is to show an error message below a TextInput field when it's left empty.
To achieve this, I've been experimenting with the @react-hook-form library.
I've wrapped my TextInput within a Controller component and defined the "rules" property as "required" along with the specific error message, but unfortunately, it's not functioning as expected...
<View>
<Controller
control={control}
name="username"
defaultValue=""
rules={{
required: { value: true, message: "Username is required" },
}}
render={({ field: { onChange, value } }) => (
<TextInput
value={value}
placeholder={'username'}
autoFocus={true}
onChangeText={(text: string) => {
onChange(text);
handleChangeText(text, 'login');
}}
onSubmitEditing={() => refPasswordInput.current?.focus()}
/>
)}
/>
I've searched extensively for a solution, but nothing has worked so far.
Thank you in advance.
{EDIT}
Here is the updated component following the first response:
<View>
<Controller
control={control}
name="username"
defaultValue=""
rules={{
required: { value: true, message: "Username is required" },
}}
render={({ field: { onChange, value }, formState: { errors } }) => (
<TextInput
value={value}
placeholder={'username'}
autoFocus={true}
onChangeText={(text: string) => {
onChange(text);
handleChangeText(text, 'login');
}}
onSubmitEditing={() => refPasswordInput.current?.focus()}
/>
{errors.username && <Text>{errors.username.message}</Text>}
)}
/>
</View>
And here is a screenshot of the current state: https://i.sstatic.net/TCvyt.png