feat: migrate sign up screen to react-hook-form

src/screens/SignUp.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
 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 BackgroundImg from '@assets/background.png';
 import Logo from '@assets/logo.svg';
@@ -13,18 +13,10 @@ import { Button } from '@components/Button';
 export function SignUp() {
   const navigation = useNavigation<AuthNavigatorRoutesProps>();
 
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const { control } = useForm();
 
   function handleSignUp() {
-    console.debug({
-      name,
-      email,
-      password,
-      confirmPassword,
-    });
+    // do something again
   }
 
   const handleGoBack = () => {
@@ -54,28 +46,60 @@ export function SignUp() {
           <Center gap="$2" flex={1}>
             <Heading color="$gray100">Crie sua a conta</Heading>
 
-            <Input placeholder="Nome" autoCorrect={false} onChangeText={setName} />
-
-            <Input
-              placeholder="E-mail"
-              keyboardType="email-address"
-              autoCapitalize="none"
-              autoCorrect={false}
-              onChangeText={setEmail}
+            <Controller
+              control={control}
+              name="name"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  placeholder="Nome"
+                  autoCorrect={false}
+                  onChangeText={onChange}
+                  value={value}
+                />
+              )}
             />
 
-            <Input
-              placeholder="Senha"
-              autoCapitalize="none"
-              secureTextEntry
-              onChangeText={setPassword}
+            <Controller
+              control={control}
+              name="email"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  placeholder="E-mail"
+                  keyboardType="email-address"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  onChangeText={onChange}
+                  value={value}
+                />
+              )}
             />
 
-            <Input
-              placeholder="Confirme a senha"
-              autoCapitalize="none"
-              secureTextEntry
-              onChangeText={setConfirmPassword}
+            <Controller
+              control={control}
+              name="password"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  placeholder="Senha"
+                  autoCapitalize="none"
+                  secureTextEntry
+                  onChangeText={onChange}
+                  value={value}
+                />
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="confirmPassword"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  placeholder="Confirme a senha"
+                  autoCapitalize="none"
+                  secureTextEntry
+                  onChangeText={onChange}
+                  value={value}
+                />
+              )}
             />
 
             <Button title="Criar e acessar" onPress={handleSignUp} />