0

Validação de formulário no React Native com React Hook Form

G
Giovanna Cunha

Criar e validar formulários não é uma tarefa fácil, precisamos pensar em como salvar as entradas, tratar os erros e evitar renderizações desnecessárias. A prática mais comum ao criar um formulário com react native é capturar as entradas da seguinte forma:


export const Login = () => {

  const [email, setEmail] = useState('');

  const [password, setPassword] = useState('');

  return (
    <View>
      <TextInput
        placeholder="E-mail"
        onChangeText={(value) => { setEmail(value) }}
        value={email}
      />
      <TextInput
        placeholder="E-mail"
        onChangeText={(value) => { setPassword(value) }}
        value={password}
      />
   </View>
  )
}
  
  

Ao utilizar este método a cada novo caractere digitado nos inputs, a função onChangeText será chamada novamente e causará novas renderizações.


Utilizando React Hook Form


Inicie um novo projeto React Native. Neste exemplo vou utilizar o Expo

Você pode encontrar mais detalhes sobre o Expo aqui: Introduction to Expo - Expo Documentation


Depois de ter instalado o expo rode o seguinte comando

expo init nomedoprojeto

Depois de iniciar o seu projeto, crie uma pasta chamada src na raiz do projeto, em seguida dentro de src crie uma pasta chamada components. Por fim dentro de components crie uma pasta chamada Login e dentro dela um arquivo chamado index.js


Vou deixar um link com uma imagem da estrutura do projeto: project_wirdwy.png (1902×956) (cloudinary.com)

Não esqueça de importar seu componente no App.js


Agora vamos instalar o React Hook Form


                                        npm install react-hook-form

Depois de adicionar os inputs e estilizar o componente Login ficou assim:

Ao final do artigo vou deixar o link do repositório


import React from 'react'
import { KeyboardAvoidingView, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { theme } from '../../themes/theme'
import {styles} from './styles'


export const Login = () => {
  return (
    <KeyboardAvoidingView style={styles.container}>
      <Text style={styles.title}>Login</Text>
      <TextInput
        style={styles.input}
        placeholder="E-mail"
        placeholderTextColor={theme.colors.primary}
      />
      <Text style={styles.error}></Text>
      <TextInput
        secureTextEntry
        style={styles.input}
        placeholder="Senha"
        placeholderTextColor={theme.colors.primary}
      />
      <Text style={styles.error}></Text>
      <TouchableOpacity
        activeOpacity={0.7}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    </KeyboardAvoidingView>
  )
}


Implementando o React Hook Form


import React from 'react'
import { KeyboardAvoidingView, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { theme } from '../../themes/theme'
import {styles} from './styles'
import {Controller, useForm} from 'react-hook-form'


export const Login = () => {
  
  const {handleSubmit, control,
    formState: {errors, isValid},
  } = useForm({mode: 'onBlur'})


  const onSubmit = (data) => {
    console.log(data)
  }


  return (
    <KeyboardAvoidingView style={styles.container}>
      <Text style={styles.title}>Login</Text>
      <Controller
        control={control}
        name="email"
        render={({field: {onChange, value, onBlur}}) => (
          <TextInput
            style={styles.input}
            placeholder="E-mail"
            placeholderTextColor={theme.colors.primary}
            value={value}
            onBlur={onBlur}
            onChangeText={value => onChange(value)}
          />
        )}
        rules={{
          required: {
            value: true,
            message: 'E-mail não pode estar vazio'
          },
        }}
      />
      <Text style={styles.error}>{errors.email?.message}</Text>
      <Controller
        control={control}
        name="password"
        render={({field: {onChange, value, onBlur}}) => (
          <TextInput
            secureTextEntry
            style={styles.input}
            placeholder="Senha"
            placeholderTextColor={theme.colors.primary}
            value={value}
            onBlur={onBlur}
            onChangeText={value => onChange(value)}
          />
        )}
        rules={{
          required: {
            value: true,
            message: 'Senha não pode estar vazia'
          },
          minLength: {
            value: 8,
            message: 'Senha deve ter pelo menos 8 caracteres'
          },
          maxLength: {
            value: 200,
            message: 'Senha deve ter até 200 caracteres'
          }
        }}
      />
      <Text style={styles.error}>{errors.password?.message}</Text>
      <TouchableOpacity
        disabled={!isValid}
        activeOpacity={0.7}
        style={styles.button}
        onPress={handleSubmit(onSubmit)}
      >
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    </KeyboardAvoidingView>
  )
}

Primeiramente importamos o useForm e o Controller.

O useForm é o custom hook que carrega todas as funções que desestruturamos.

  • HandleSubmit é o responsável por invocar a função que queremos que ele execute ao enviar o formulário. No nosso caso a onSubmit que irá printar todos os dados no console.
  • errors é o responsável por gerenciar o estado de erro do formulário.
  • isValid é um boolean responsável por dizer ao React Hook Form se o formulário é válido ou não.
  • Controller - Como a própria documentação diz: O React Hook Form abrange componentes descontrolados e entradas nativas, no entanto é difícil evitar trabalhar com componentes controlados externos, como React-Select, AntD e Material-UI. Este componente invólucro tornará mais fácil para você trabalhar com eles.
  • control contém métodos para registrar componentes no Formulário React Hook.
  • Rules nos permite criar diversos tipos de validação. Você pode inclusive validar o formato do e-mail usando REGEX.


Você pode encontrar mais detalhes sobre o Controller aqui: https://react-hook-form.com/api/usecontroller/controller


Link do repositório: https://github.com/GiovannaK/React_native_react_hook_form


Sinta-se a vontade para contribuir!

0
0

Comentários (1)

0
David Caron

David Caron

05/10/2021 08:46

Parabéns Giovanna, ótimo artigo sobre React Native

Portfolio -> https://giovannakelli.tk

Brasil