Fix forms not registering input values

Ended up ruining the clean looking code. There's probably a way to make
it clean AND working

src/components/FormInput.tsx

@@ -1,9 +1,11 @@
 import { Input, Text, WarningOutlineIcon, FormControl, IInputProps } from 'native-base';
 import React from 'react';
-import { Controller, UseControllerProps, useForm } from 'react-hook-form';
+import { Control, Controller, UseControllerProps } from 'react-hook-form';
 import { ReturnKeyTypeOptions } from 'react-native';
 
 type FormInputProps = {
+  errors: any; // TODO: Figure out how to handle typing this
+  control: Control<any, any>;
   name: string;
   label: string;
   rules?: UseControllerProps['rules'];
@@ -11,6 +13,8 @@ type FormInputProps = {
 } & IInputProps;
 
 const FormInput = ({
+  errors,
+  control,
   name,
   label,
   rules = {
@@ -19,10 +23,6 @@ const FormInput = ({
   returnKeyType = 'next',
   ...rest
 }: FormInputProps) => {
-  const {
-    formState: { errors },
-    control,
-  } = useForm();
   const fieldError = errors[name];
   return (
     <Controller

src/modules/login/Login.tsx

@@ -10,7 +10,7 @@ import theme from 'src/theme';
 import useLogin from './useLogin';
 
 const Login = () => {
-  const { isLoggingIn, errors, setFocus, onSubmit } = useLogin();
+  const { isLoggingIn, errors, control, setFocus, onSubmit } = useLogin();
 
   return (
     <ScrollView>
@@ -20,6 +20,8 @@ const Login = () => {
           name="email"
           label="E-post / Brukernavn"
           keyboardType="email-address"
+          control={control}
+          errors={errors}
           autoFocus
           autoCapitalize="none"
           autoCorrect={false}
@@ -28,6 +30,8 @@ const Login = () => {
         <FormInput
           name="password"
           label="Passord"
+          control={control}
+          errors={errors}
           secureTextEntry
           autoCapitalize="none"
           autoCorrect={false}

src/modules/login/useLogin.tsx

@@ -20,6 +20,7 @@ const useLogin = () => {
   const loginError = useAppSelector((store) => store.loginError);
 
   const {
+    control,
     handleSubmit,
     formState: { errors },
     setFocus,
@@ -36,7 +37,7 @@ const useLogin = () => {
     }
   }, [isAuthenticated, navigation]);
 
-  return { onSubmit, isLoggingIn, setFocus, errors: { ...errors, ...loginError } };
+  return { onSubmit, isLoggingIn, setFocus, control, errors: { ...errors, ...loginError } };
 };
 
 export default useLogin;

src/modules/register/UserRegister.tsx

@@ -13,7 +13,8 @@ import useUserRegister from './useUserRegister';
 const { Toast } = Incubator;
 
 const UserRegister = () => {
-  const { isRegisteringUser, onSubmit, isValid, errors, registerError, setFocus, toast, setToast } = useUserRegister();
+  const { isRegisteringUser, onSubmit, isValid, control, errors, registerError, setFocus, toast, setToast } =
+    useUserRegister();
   const isDisabled = isRegisteringUser || !isValid;
   // TODO: validate on type
   // TODO: highlight errorfields
@@ -22,12 +23,27 @@ const UserRegister = () => {
     <>
       <View style={styles.card}>
         <ScrollView>
-          <FormInput name="firstName" label="Fornavn" autoFocus onSubmitEditing={() => setFocus('lastName')} />
-          <FormInput name="lastName" label="Etternavn" onSubmitEditing={() => setFocus('email')} />
+          <FormInput
+            name="firstName"
+            label="Fornavn"
+            control={control}
+            errors={errors}
+            autoFocus
+            onSubmitEditing={() => setFocus('lastName')}
+          />
+          <FormInput
+            name="lastName"
+            label="Etternavn"
+            control={control}
+            errors={errors}
+            onSubmitEditing={() => setFocus('email')}
+          />
           <FormInput
             name="email"
             label="E-post"
             keyboardType="email-address"
+            control={control}
+            errors={errors}
             autoCapitalize="none"
             autoCorrect={false}
             rules={{
@@ -39,12 +55,16 @@ const UserRegister = () => {
           <FormInput
             name="phoneNumber"
             label="Mobilnummer"
+            control={control}
+            errors={errors}
             keyboardType="phone-pad"
             onSubmitEditing={() => setFocus('password')}
           />
           <FormInput
             name="password"
             label="Passord"
+            control={control}
+            errors={errors}
             secureTextEntry
             autoCapitalize="none"
             autoCorrect={false}

src/modules/register/useUserRegister.tsx

@@ -25,6 +25,7 @@ const useUserRegister = () => {
   const isAuthenticatedPrev = usePrevious(isAuthenticated);
 
   const {
+    control,
     handleSubmit,
     formState: { errors, isValid },
     setFocus,
@@ -55,6 +56,6 @@ const useUserRegister = () => {
     }
   }, [isAuthenticatedPrev, isAuthenticated, navigation]);
 
-  return { isRegisteringUser, onSubmit, isValid, registerError, errors, setFocus, toast, setToast };
+  return { isRegisteringUser, onSubmit, isValid, registerError, control, errors, setFocus, toast, setToast };
 };
 export default useUserRegister;