feat: implement sign up form validation with yup

src/screens/SignUp.tsx

@@ -1,6 +1,8 @@
 import { Center, Heading, Image, ScrollView, Text, VStack } from '@gluestack-ui/themed';
 import { useNavigation } from '@react-navigation/native';
 import { Controller, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import BackgroundImg from '@assets/background.png';
 import Logo from '@assets/logo.svg';
@@ -10,13 +12,23 @@ import { AuthNavigatorRoutesProps } from '@routes/auth.routes';
 import { Input } from '@components/Input';
 import { Button } from '@components/Button';
 
-type FormDataProps = {
+type FormData = {
   name: string;
   email: string;
   password: string;
   confirmPassword: string;
 };
 
+const signUpSchema = yup.object({
+  name: yup.string().required('Informe o nome.'),
+  email: yup.string().required('Informe o e-mail.').email('E-mail inválido.'),
+  password: yup.string().required('Informe a senha.').min(8, 'Mínimo de 8 caracteres.'),
+  confirmPassword: yup
+    .string()
+    .required('Confirme a senha.')
+    .oneOf([yup.ref('password'), null], 'Senhas não coincidem.'),
+});
+
 export function SignUp() {
   const navigation = useNavigation<AuthNavigatorRoutesProps>();
 
@@ -24,9 +36,11 @@ export function SignUp() {
     control,
     handleSubmit,
     formState: { errors },
-  } = useForm<FormDataProps>();
+  } = useForm<FormData>({
+    resolver: yupResolver(signUpSchema),
+  });
 
-  function handleSignUp({ name, email, password, confirmPassword }: FormDataProps) {
+  function handleSignUp({ name, email, password, confirmPassword }: FormData) {
     console.debug({
       name,
       email,
@@ -65,7 +79,6 @@ export function SignUp() {
             <Controller
               control={control}
               name="name"
-              rules={{ required: 'Informe o nome.' }}
               render={({ field: { onBlur, onChange, value } }) => (
                 <Input
                   placeholder="Nome"
@@ -81,13 +94,6 @@ export function SignUp() {
             <Controller
               control={control}
               name="email"
-              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"
@@ -105,13 +111,15 @@ export function SignUp() {
             <Controller
               control={control}
               name="password"
-              render={({ field: { onChange, value } }) => (
+              render={({ field: { onBlur, onChange, value } }) => (
                 <Input
                   placeholder="Senha"
                   autoCapitalize="none"
                   secureTextEntry
+                  onBlur={onBlur}
                   onChangeText={onChange}
                   value={value}
+                  errorMessage={errors.password?.message}
                 />
               )}
             />
@@ -119,13 +127,15 @@ export function SignUp() {
             <Controller
               control={control}
               name="confirmPassword"
-              render={({ field: { onChange, value } }) => (
+              render={({ field: { onBlur, onChange, value } }) => (
                 <Input
                   placeholder="Confirme a senha"
                   autoCapitalize="none"
                   secureTextEntry
+                  onBlur={onBlur}
                   onChangeText={onChange}
                   value={value}
+                  errorMessage={errors.confirmPassword?.message}
                   onSubmitEditing={handleSubmit(handleSignUp)}
                   returnKeyType="send"
                 />