feat: add form validation on sign up screen

src/components/Input.tsx

@@ -1,12 +1,28 @@
-import { Input as GSInput, InputField } from '@gluestack-ui/themed';
+import {
+  FormControl,
+  FormControlError,
+  FormControlErrorText,
+  Input as GSInput,
+  InputField,
+} from '@gluestack-ui/themed';
 import { ComponentProps } from 'react';
 
 type Props = ComponentProps<typeof InputField> & {
   isReadOnly?: boolean;
+  errorMessage?: string | null;
+  isInvalid?: boolean;
 };
 
-export function Input({ isReadOnly = false, ...others }: Props) {
+export function Input({
+  isReadOnly = false,
+  errorMessage = null,
+  isInvalid = false,
+  ...others
+}: Props) {
+  const invalid = !!errorMessage || isInvalid;
+
   return (
+    <FormControl w="$full" mb="$4" isInvalid={invalid}>
       <GSInput
         h="$14"
         borderColor="$gray700"
@@ -26,5 +42,10 @@ export function Input({ isReadOnly = false, ...others }: Props) {
           {...others}
         />
       </GSInput>
+
+      <FormControlError>
+        <FormControlErrorText color="$red500">{errorMessage}</FormControlErrorText>
+      </FormControlError>
+    </FormControl>
   );
 }

src/screens/SignUp.tsx

@@ -20,15 +20,11 @@ type FormDataProps = {
 export function SignUp() {
   const navigation = useNavigation<AuthNavigatorRoutesProps>();
 
-  const { control, handleSubmit } = useForm<FormDataProps>({
+  const {
-    // unnecessary because this is a registration screen
+    control,
-    defaultValues: {
+    handleSubmit,
-      name: '',
+    formState: { errors },
-      email: '',
+  } = useForm<FormDataProps>();
-      password: '',
-      confirmPassword: '',
-    },
-  });
 
   function handleSignUp({ name, email, password, confirmPassword }: FormDataProps) {
     console.debug({
@@ -69,12 +65,15 @@ export function SignUp() {
             <Controller
               control={control}
               name="name"
-              render={({ field: { onChange, value } }) => (
+              rules={{ required: 'Informe o nome.' }}
+              render={({ field: { onBlur, onChange, value } }) => (
                 <Input
                   placeholder="Nome"
                   autoCorrect={false}
+                  onBlur={onBlur}
                   onChangeText={onChange}
                   value={value}
+                  errorMessage={errors.name?.message}
                 />
               )}
             />
@@ -82,14 +81,23 @@ export function SignUp() {
             <Controller
               control={control}
               name="email"
-              render={({ field: { onChange, value } }) => (
+              rules={{
+                required: 'Informe o e-mail.',
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: 'E-mail inválido',
+                },
+              }}
+              render={({ field: { onBlur, onChange, value } }) => (
                 <Input
                   placeholder="E-mail"
                   keyboardType="email-address"
                   autoCapitalize="none"
                   autoCorrect={false}
+                  onBlur={onBlur}
                   onChangeText={onChange}
                   value={value}
+                  errorMessage={errors.email?.message}
                 />
               )}
             />