Criando Formulários profissionais com React Hook Form

Normalmente ao criar uma aplicação em React, precisamos gerar algum tipo de formulário para uso do usuário, e em sua maior parte não é uma tarefa difícil. Entretanto, existem algumas ferramentas que auxiliam na criação de formulários com diversas funções, com menos esforço. No artigo de hoje veremos o uso prático de uma biblioteca chamada: React Hook Form.

o React Hook Form é uma biblioteca excelente para gerenciamento de formulários em React, permitindo que desenvolvedores construam formulários eficientes, flexíveis e escaláveis com menos código. No entanto essa ferramenta foi criada para ser usada no React "puro". Como usá-lo no React Native?

Instalando React Hook Form -

Antes de começar, é necessário instalar a biblioteca React Hook Form no seu projeto React Native. Para isso, abra o terminal e navegue até a pasta do seu projeto e execute o seguinte comando:

npm install react-hook-form
yarn add react-hook-form

No caso que tal usar como base a forma "tradicional de criação de um formulário, para após isso incrementar aos poucos o React Hook Form, até para seja perceptível a mudança acontecendo de maneira dinâmica.

import React, {useState} from 'react';

import {View, Text, StyleSheet, TextInput, TouchableOpacity} from 'react-native';

export function App(){

 const [userName, setUserName] = useState('');
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');

 function signIn(){
  const data = {
   username,
   email,
   password
  }
 console.log(data)

 }

 return (
 <View style = {style.container}>
  <Text style = {style.title}> Bem vindo(a) <Text/>

 <TextInput
  style = {style.input}
  onChangeText = {setUserName}
  value = {userName}
  placeholder= 'Digite aqui seu nome:'
 />

  <TextInput
  style = {style.input}
  onChangeText = {setEmail}
  value = {email}
  placeholder= 'Digite aqui seu email:'
 />

  <TextInput
  style = {style.input}
  onChangeText = {setPassword}
  value = {password}
  placeholder= 'Digite aqui sua senha:'
 />

 <TouchableOpacity style = {style.button} onPress ={signIn}>
   <Text style = {style.buttonText}> Acesse: </Text> 
 </TouchableOpacity>
</View>
.........
)

}

//estilização será ignorada

Acima temos um exemplo clássico de Formulário. Seu racioncínio é simples:

Façamos um upgrade do que já se tem para utilizar a biblioteca React Hook Form:

import React, {useState} from 'react';

import {View, Text, StyleSheet, TextInput, TouchableOpacity} from 'react-native';

import {useForm, Controller } from 'react-hook-form';

export function App(){

 const {control, handleSubmit, formState: {errors} } = useForm({})

 function signIn(data){
  Alert.alert(data);
 }

 return (
 <View style = {style.container}>
  <Text style = {style.title}> Bem vindo(a) <Text/>

<Controller 
 control = {control}
 name = 'username'
 render = {({ field: {onChange, value}}) => (
  <TextInput
  style = {style.input}
  onChangeText = {onChange}
  value = {value}
  placeholder= 'Digite aqui seu nome:'
 />
 )}
/>

<Controller 
 control = {control}
 name = 'email'
 render = {({ field: {onChange, value}}) => (
  <TextInput
  style = {style.input}
  onChangeText = {onChange}
  value = {value}
  placeholder= 'Digite aqui seu email:'
 />
 )}
/>

<Controller 
 control = {control}
 name = 'password'
 render = {({ field: {onChange, value}}) => (
  <TextInput
  style = {style.input}
  onChangeText = {onChange}
  value = {value}
  placeholder= 'Digite aqui seu password:'
  secureTextEntry ={true}
 />
 )}
/>


 <TouchableOpacity style = {style.button} onPress ={handleSubmit(signIn)}>
   <Text style = {style.buttonText}> Acesse: </Text> 
 </TouchableOpacity>
</View>
.........
)

}

//estilização será ignorada

No caso acima, nós já estamos devolvendo o resultado digitado como objeto, e também suas propriedades, diferente do que seria, utilizando a formulação de formulários simples.

O componente usa o pacote 'react-hook-form' para gerenciar o estado do formulário. Quando o usuário clica no botão, a função "handleSubmit" é chamada para enviar os dados do formulário e a função "signIn" é chamada para lidar com os dados do formulário enviados.

O componente usa a função "useState" do React para definir o estado inicial do formulário como um objeto vazio. Em seguida, usa o hook "useForm" do pacote 'react-hook-form' para criar o objeto "control" e a função "handleSubmit" para gerenciar o estado do formulário e lidar com o envio do formulário. A propriedade "formState: {errors}" é usada para gerenciar os erros de validação do formulário.

Os campos de entrada são criados usando o componente "Controller" do 'react-hook-form'. Cada campo de entrada tem um nome ('username', 'email' e 'password'), um objeto "field" com as propriedades "onChange" e "value" para gerenciar o estado do campo de entrada e um componente "TextInput" que permite que o usuário digite texto e interaja com o campo.

O botão de envio é criado usando o componente "TouchableOpacity" do React Native. Quando o usuário clica no botão, a função "handleSubmit" é chamada e envia os dados do formulário para a função "signIn". A função "signIn" é responsável por lidar com os dados do formulário enviados, como autenticar o usuário ou mostrar uma mensagem de erro se o formulário não estiver preenchido corretamente.

Espero que esse artigo tenha lhe ajudado a ver outras oportunidase e que até mesmo criações de formulário podem ser mais otimizadas e dinâmicas hoje em dia. Outras configurações como adição de validação e até mesmo configurações para impedir que nomes ou emails vazios sejam alertados, podem ficar para sua própria caracterização. Porém com essa base já conseguimos compreender como essa biblioteca é vasta e pode ser usada em projetos muito mais complexos.