TextInput no React Native: referência de props com busca | We.Inc
Todas as props de TextInput que você costuma usar, em uma tabela com busca: textarea multiline, keyboardType, secureTextEntry, autoComplete, returnKeyType, submitBehavior e mais.
TextInput é o componente central do React Native para texto digitado. Guarde o valor no state e atualize-o em onChangeText, que entrega a nova string. Para um textarea, defina multiline como true e adicione textAlignVertical: "top" para que o Android fique igual ao iOS. keyboardType, autoComplete e secureTextEntry escolhem o teclado, a dica de preenchimento automático e o mascaramento de senha.
A referência oficial é uma longa lista em ordem alfabética. Esta página reúne as props que as pessoas mais procuram, com valores e padrões reais, em uma tabela que você filtra por nome, valor ou plataforma. Digite multiline, password ou android na caixa para restringir.
Digite uma palavra na caixa de filtro: o nome de uma prop, um valor como decimal-pad ou uma plataforma.
As linhas que correspondem em qualquer coluna continuam visíveis; o contador abaixo da caixa mostra quantas são.
Leia a coluna de padrão antes de definir uma prop; vários padrões pegam as pessoas de surpresa.
Copie os exemplos abaixo da tabela para um textarea, um campo de e-mail e uma sequência de foco para o próximo campo.
autoCapitalize tem sentences como padrão, então defina none nos campos de e-mail e de nome de usuário.
secureTextEntry não funciona junto com multiline; um campo de senha precisa ficar em uma linha só.
inputMode tem prioridade sobre keyboardType quando os dois estão definidos, então escolha um.
maxLength trava a digitação no limite, o que evita o piscar de cortar a string você mesmo em onChangeText.
O Android desenha uma borda inferior por padrão; underlineColorAndroid="transparent" a remove.
Perguntas frequentes
Como faço um textarea no React Native?
Não existe um componente textarea separado. Use TextInput com multiline como true, dê a ele uma altura ou numberOfLines e adicione textAlignVertical: "top" para que a primeira linha comece no topo no Android, como acontece no iOS.
Por que a tecla Return adiciona uma nova linha em vez de enviar?
Em um campo multiline, submitBehavior tem "newline" como padrão. Defina como "submit" ou "blurAndSubmit" se o Return deve disparar onSubmitEditing. Campos de uma linha têm "blurAndSubmit" como padrão.
O que substituiu blurOnSubmit?
submitBehavior. A documentação marca blurOnSubmit como obsoleta, e submitBehavior tem prioridade quando os dois estão presentes.
Quais valores de keyboardType funcionam nas duas plataformas?
default, number-pad, decimal-pad, numeric, email-address, phone-pad e url. Outros, como twitter e web-search no iOS ou visible-password no Android, valem só para uma plataforma.
Controlado ou não controlado
A maioria das telas passa value e onChangeText, assim o state sempre guarda o que está na tela e você pode validar ou reformatar o texto. defaultValue define uma string inicial sem acompanhar cada tecla, o que serve para um campo que você lê só uma vez, no envio.
Use uma ref quando precisar mover o foco. Chamar focus() na ref do próximo campo dentro de onSubmitEditing dá aquele comportamento conhecido de tocar em Return para descer pelo formulário.
Teclados e preenchimento automático
keyboardType muda as teclas que a pessoa vê; ele nunca valida o que é digitado. Um campo decimal-pad ainda pode receber letras coladas, então confira a string antes de salvar.
autoComplete é a dica multiplataforma para o preenchimento automático do sistema, e textContentType é a exclusiva do iOS. Definir as duas nos campos de login permite preencher senhas salvas e códigos de uso único vindos de mensagens em qualquer plataforma.
Exemplos de TextInput
Um textarea multiline
textAlignVertical mantém o cursor no topo no Android, e a contagem de caracteres vem direto do state.
Campo de e-mail que move o foco para o próximo campo
returnKeyType="next" define o rótulo da tecla, e onSubmitEditing foca o campo de senha pela ref dele.
Props do TextInput, valores e padrões
Prop
Valores ou tipo
Padrão
Plataforma
O que faz
value / onChangeText
string / (text) => void
Ambas
Texto controlado e o callback que recebe cada nova string
defaultValue
Ambas
Texto inicial quando você não controla o valor
Ambas
Dica exibida enquanto o campo está vazio
placeholderTextColor
Ambas
Cor do texto do placeholder
Ambas
Permite várias linhas; é o textarea do React Native
numberOfLines
Ambas
Máximo de linhas exibidas; no iOS, só com a New Architecture