react-hook-form in native

들어가기
native에서는 useForm사용이 web과는 다르다.
항상 공식문서를 참조하면 변화를 따라가야 함

https://react-hook-form.com/get-started#reactnative

npm i react-hook-form

mutation부분은 신경쓰지 말고 useForm부분만 신경쓸것.
**부분만 신경써서 볼것!!

1. createAccount.js

import { gql, useMutation } from '@apollo/client'
import React, { useRef } from 'react'
import { Controller, useForm } from 'react-hook-form' ************
import AuthButton from '../components/auth/AuthButton'
import AuthLayout from '../components/auth/AuthLayout'
import { TextInput } from '../components/auth/AuthShared'

const CREATE_ACCOUNT_MUTATION = gql`
  mutation createAccount(
    $username: String!
    $email: String!
    $password: String!
  ) {
    createAccount(username: $username, email: $email, password: $password) {
      ok
      error
    }
  }
`
const Text = styled.Text`  ******************errorMessage 보내는부분
  color: white;
  width: 100%;
  background-color: red;
`


export default function CreateAccount({ navigation }) {
  const {
    register,
    setValue,
    handleSubmit,
    control,
    reset,
    getValues,
    formState: { errors },
  } = useForm({         *********************************
    defaultValues: {
      username: '',
      email: '',
      password: '',
    },
  })
  const onCompleted = (data) => {
    const {
      createAccount: { ok },
    } = data
    const { username, password } = getValues()
    if (ok) {
      navigation.navigate('Login', {
        username,
        password,
      })
    }
  }

  const [createAccountMutation, { loading }] = useMutation(
    CREATE_ACCOUNT_MUTATION,
    { onCompleted }
  )

  const onSubmit = (data) => {  ****************************
    console.log(data)
    if (!loading) {
      createAccountMutation({
        variables: {
          ...data,
        },
      })
    }
  }
  const emailRef = useRef()
  const passwordRef = useRef()

  const onNext = (nextOne) => {
    nextOne?.current?.focus()
  }
  const onDone = () => {
    alert('done!')
  }

  return (
    <AuthLayout>
      <Controller  ***********************************************
        control={control}
        name="username"
        rules={{ required: true }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            placeholder="Username"
            placeholderTextColor="gray"
            returnKeyType="next"
            onSubmitEditing={() => onNext(emailRef)}
            onChangeText={(value) => onChange(value)}
            value={value}
            onBlur={onBlur}
          />
        )}
      />
		{errors?.username?.types === 'required' && (
        <Text>username is required</Text>
      )}  *************************************************************
      <Controller
        control={control}
        name="email"
        rules={{ required: true }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            ref={emailRef}
            placeholder="Email"
            placeholderTextColor="gray"
            returnKeyType="next"
            keyboardType="email-address"
            onSubmitEditing={() => onNext(passwordRef)}
            onChangeText={(value) => onChange(value)}
            value={value}
            onBlur={onBlur}
          />
        )}
      />

      <Controller
        control={control}
        name="password"
        rules={{ required: true }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            ref={passwordRef}
            placeholder="Password"
            placeholderTextColor="gray"
            returnKeyType="done"
            onSubmitEditing={onDone}
            onChangeText={(value) => onChange(value)}
            value={value}
            onBlur={onBlur}
            secureTextEntry
          />
        )}
      />

      <AuthButton
        text="Create Account"
        disabled={false}
        onPress={handleSubmit(onSubmit)}   *****************************
      />
    </AuthLayout>
  )
}

**부분만 따라가면서 읽으면 이해될것이라고 생각함.~