feat: add form validation on sign up screen

src/components/Input.tsx

@@ -1,30 +1,51 @@
-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 (
-    <GSInput
-      h="$14"
-      borderColor="$gray700"
-      borderWidth="$1"
-      borderRadius="$md"
-      $focus={{
-        borderColor: '$green500',
-      }}
-      isReadOnly={isReadOnly}
-      opacity={isReadOnly ? 0.5 : 1}>
-      <InputField
-        bg="$gray700"
-        px="$4"
-        color="$white"
-        fontFamily="$body"
-        placeholderTextColor="$gray300"
-        {...others}
-      />
-    </GSInput>
+    <FormControl w="$full" mb="$4" isInvalid={invalid}>
+      <GSInput
+        h="$14"
+        borderColor="$gray700"
+        borderWidth="$1"
+        borderRadius="$md"
+        $focus={{
+          borderColor: '$green500',
+        }}
+        isReadOnly={isReadOnly}
+        opacity={isReadOnly ? 0.5 : 1}>
+        <InputField
+          bg="$gray700"
+          px="$4"
+          color="$white"
+          fontFamily="$body"
+          placeholderTextColor="$gray300"
+          {...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>({
-    // unnecessary because this is a registration screen
-    defaultValues: {
-      name: '',
-      email: '',
-      password: '',
-      confirmPassword: '',
-    },
-  });
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormDataProps>();
 
   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}
                 />
               )}
             />