Formulários no React Native: inputs, validação e teclado
Guia de formulários e validação no React Native
Formulários no React Native: inputs controlados e validação | We.Inc
Monte um formulário React Native com TextInputs controlados, uma única função de validação, mensagens de erro abaixo de cada campo e controle do teclado. Teste a validação ao vivo no seu navegador.
Um formulário confiável no React Native precisa de três peças: TextInputs controlados pelo state, uma função validate que retorna um erro por campo e o controle do teclado. Mostre cada mensagem depois que a pessoa sair do campo ou apertar enviar. Envolva a tela em KeyboardAvoidingView e defina keyboardShouldPersistTaps="handled" na ScrollView para que o botão de enviar continue ao alcance.
Peças de um formulário React Native
Tarefa
Ferramenta
Guardar os valores
useState com um objeto, ou um hook por campo
Verificar os valores
Uma função pura validate(values) que retorna um objeto de erros
Mostrar erros
Text abaixo de cada campo, ligado por accessibilityLabel ou uma live region
Manter os campos visíveis
KeyboardAvoidingView com behavior="padding" no iOS
Tocar em enviar com o teclado aberto
keyboardShouldPersistTaps="handled" na ScrollView
Passar de um campo para outro
returnKeyType="next" e focus() na próxima ref
As regras de validação desta página são JavaScript puro, então a prévia abaixo roda exatamente a função que você colaria na sua tela React Native. Preencha os campos, saia deles e clique em Criar conta para ver cada mensagem aparecer e sumir.
Cada campo grava em um único objeto values por meio de onChangeText.
onBlur marca o campo como tocado, para que o erro possa aparecer sem gritar com alguém no meio da digitação.
validate(values) roda a cada render e retorna um objeto com uma mensagem por regra quebrada.
O envio marca todos os campos como tocados e para se o objeto de erros tiver alguma chave.
Sem erros restantes, o handler envia os valores e pode chamar Keyboard.dismiss().
Mantenha validate pura para poder testá-la sem renderizar nada e reutilizá-la no servidor.
Não desative o botão de enviar enquanto o formulário estiver inválido; apertá-lo é como muitas pessoas descobrem o que está faltando.
Coloque o texto do erro logo abaixo do campo, com palavras que digam como corrigir o problema.
Remova os espaços dos endereços de e-mail antes de verificá-los; um espaço colado no final é o falso erro mais comum.
Verifique tudo de novo no servidor. As regras no cliente orientam as pessoas, mas não são confiáveis.
Perguntas frequentes
Preciso de uma biblioteca de formulários no React Native?
Não. Poucos campos funcionam bem com useState e uma função validate como a desta página. Bibliotecas ajudam quando um formulário tem muitos campos, arrays aninhados ou verificações assíncronas, e o React Hook Form se descreve como funcionando na web e no React Native.
Como impedir que o teclado cubra meus inputs?
Envolva o formulário em KeyboardAvoidingView. Ele muda a altura, a posição ou o padding inferior para acompanhar o teclado; behavior="padding" é a escolha comum no iOS. keyboardVerticalOffset compensa um header acima da view e tem padrão 0.
Por que meu botão de enviar precisa de dois toques?
O keyboardShouldPersistTaps da ScrollView tem padrão "never", então o primeiro toque só fecha o teclado. Defina como "handled" e o botão recebe o toque na hora.
Como fecho o teclado depois de enviar?
Chame Keyboard.dismiss(), que a documentação descreve como fechar o teclado ativo e remover o foco.
Quando mostrar um erro
Mostrar todas as regras em vermelho assim que a tela abre parece uma bronca. Acompanhe quais campos a pessoa já tocou e só revele uma mensagem depois que ela sair daquele campo, ou depois de uma tentativa de envio.
Quando uma mensagem estiver visível, rode a verificação de novo a cada tecla para que ela desapareça no instante em que o valor ficar válido. Essa confirmação instantânea é a recompensa por esperar antes de mostrá-la.
Tornando os erros acessíveis
Uma borda vermelha sozinha não significa nada para quem usa leitor de tela ou tem baixa percepção de cores. Escreva o problema em texto e inclua-o no accessibilityLabel do campo para que seja lido quando o foco chegar ali.
No Android, accessibilityLiveRegion="polite" no Text do erro faz o TalkBack anunciar a mensagem quando ela aparece, sem mover o foco.
Código de formulário para copiar
A função validate
JavaScript puro, sem imports do React Native, então roda em testes, na prévia web e em um servidor.
Tela de cadastro com campos tocados e controle do teclado
Um objeto values, um objeto touched e um helper Field que mostra o erro só quando deve.
Informe o seu nome.
Informe o seu endereço de e-mail.
Falta um @ ou um domínio nesse endereço de e-mail.
Use pelo menos 8 caracteres.
As duas senhas não coincidem.
Prévia da validação
As verificações rodam a função validate do código abaixo. As mensagens aparecem depois que você sai de um campo ou clica no botão.
Nome
Senha
Confirmar senha
Criar conta
Todos os campos são válidos. Um app real enviaria os valores agora.