Como criar formulários com validação no React Native
Construa formulários robustos com React Hook Form e Zod no seu app React Native
Por que isso é importante
Formular templating é essencial em qualquer aplicação real. Neste tutorial, você aprenderá como escalar seus formulários com validação eficiente e tipo garantido em React Native utilizando React Hook Form e Zod.
Visão geral da stack de formulários
Vamos usar React Hook Form para gerenciar estado e lógica do formulário, e Zod para definir e validar o esquema com segurança de tipos no TypeScript.
Instalação das dependências necessárias
npm install react-hook-formnpm install zodnpm install @hookform/resolversCrie seu schema com Zod
Comece criando um arquivo chamado signup.schema.ts onde ficará a definição dos campos e validações do formulário. Use o objeto z.object para definir campos como fullName, email, password e confirmPassword.
⚠️Atenção
Use a função refine para validar campos interdependentes como senha e confirmação de senha.
Inferência de tipos com Zod
Exporte também o tipo usando z.infer com base no seu schema. Isso garantirá que o formulário use o shape correto e melhore a inteligência do TypeScript.
Configurando o useForm
Importe e chame o hook useForm passando o tipo inferido e configure o resolver com zodResolver(schema) para que sua validação e tipagem estejam conectadas.
Controlando campos com Controller
Para campos personalizados, utilize o componente Controller e mapeie os campos usando as propriedades control, render, e extraia os valores de field e fieldState.
ℹ️Dica de usabilidade
Adapte o teclado com keyboardType e o comportamento de capitalização com autoCapitalize conforme o tipo do campo (nome, email, etc).
Validação visual em tempo real
O Zod permite mensagens customizadas nos erros, e o React Hook Form exibe os erros nos campos renderizados com fieldState.error?.message. Isso promove ótima experiência de usuário.
Conectando o envio dos dados
Utilize handleSubmit(onSubmit) com um botão para submeter o formulário. A função onSubmit só será chamada se todas as validações do Zod forem cumpridas.
Diferenças fundamentais com outros métodos
Com essa abordagem, não é necessário manter estado manual de cada campo. A integração entre React Hook Form e Zod faz todo o controle e ainda oferece tipagem estática.
Boas práticas ao definir schemas
Defina mensagens claras, use validações mínimas como min(5) para nome ou senha e padronize a nomenclatura dos arquivos de schema usando o sufixo .schema.ts.
Renderizar feedback de erro
Mostre mensagens ao lado do campo usando o error.message, promovendo acessibilidade e clareza ao usuário no que precisa ser corrigido.
Reutilização do schema
Como o schema tem tipo inferido, ele pode ser reutilizado tanto na validação quanto em chamadas de APIs, garantindo consistência no formato dos dados.
Organizando o projeto
Mantenha o schema em uma pasta separada como /schemas/signup.schema.ts e o formulário como um componente reutilizável, por exemplo, components/forms/SignUpForm.tsx.
Estilizando inputs
Integre seu Design System dentro dos campos controlados no render, mantendo consistência visual e usabilidade no app.
Resetando formulários
Após envio bem-sucedido, use o método reset() vindo do useForm para limpar os campos e feedbacks.
Melhorando a escala com múltiplos schemas
Crie schemas independentes para cada tipo de formulário: login, feedback, registro, etc. E compartilhe resolvers e tipos em todo o app.
❌Alerta de erro comum
Raramente, erros de validação múltiplos podem não aparecer nos campos separados. Use path dentro do refine para apontar corretamente.
Conclusão e próximos passos
Com React Hook Form e Zod você estrutura formulários escaláveis, validáveis e com segurança de tipos. Explore visualizações customizadas, máscaras de input e integrações com backend.