TextInput en React Native: referencia de props con buscador | We.Inc
Todas las props de TextInput que necesitas, en una tabla con buscador: textarea multiline, keyboardType, secureTextEntry, autoComplete, returnKeyType, submitBehavior y más.
TextInput es el componente base de React Native para escribir texto. Guarda su valor en el estado y actualízalo desde onChangeText, que te entrega la cadena nueva. Para un textarea, pon multiline a true y añade textAlignVertical: "top" para que Android se comporte como iOS. keyboardType, autoComplete y secureTextEntry eligen el teclado, la pista de autocompletado y el enmascarado de contraseñas.
La referencia oficial es una larga lista alfabética. Esta página reúne las props que la gente busca, con sus valores reales y sus valores por defecto, en una tabla que puedes filtrar por nombre, valor o plataforma. Escribe multiline, password o android en el cuadro para acotarla.
Escribe una palabra en el cuadro de filtro: el nombre de una prop, un valor como decimal-pad o una plataforma.
Las filas que coinciden en cualquier columna siguen visibles; el contador bajo el cuadro te dice cuántas son.
Lee la columna de valor por defecto antes de definir una prop; varios valores por defecto sorprenden.
Copia los ejemplos bajo la tabla para un textarea, un campo de correo y una cadena de paso al campo siguiente.
autoCapitalize vale sentences por defecto, así que ponlo a none en los campos de correo y de nombre de usuario.
secureTextEntry no funciona junto con multiline; un campo de contraseña debe quedarse en una sola línea.
inputMode tiene prioridad sobre keyboardType cuando defines los dos, así que elige uno.
maxLength detiene la escritura en el límite, lo que evita el parpadeo de recortar la cadena tú mismo en onChangeText.
Android dibuja un borde inferior por defecto; underlineColorAndroid="transparent" lo elimina.
Preguntas frecuentes
¿Cómo hago un textarea en React Native?
No existe un componente textarea aparte. Usa TextInput con multiline a true, dale una altura o numberOfLines y añade textAlignVertical: "top" para que la primera línea empiece arriba en Android, igual que en iOS.
¿Por qué la tecla Return añade una línea nueva en vez de enviar?
En un campo multilínea, submitBehavior vale "newline" por defecto. Ponlo a "submit" o "blurAndSubmit" si Return debe disparar onSubmitEditing. Los campos de una línea usan "blurAndSubmit" por defecto.
¿Qué sustituyó a blurOnSubmit?
submitBehavior. La documentación marca blurOnSubmit como obsoleto, y submitBehavior lo anula cuando están los dos.
¿Qué valores de keyboardType funcionan en ambas plataformas?
default, number-pad, decimal-pad, numeric, email-address, phone-pad y url. Otros, como twitter y web-search en iOS o visible-password en Android, solo se aplican a una plataforma.
Controlado o no controlado
La mayoría de las pantallas pasan value y onChangeText, de modo que el estado siempre contiene lo que se ve en pantalla y puedes validarlo o darle formato. defaultValue da una cadena inicial sin seguir cada pulsación, lo que encaja con un campo que solo lees una vez, al enviar.
Recurre a una ref cuando necesites mover el foco. Llamar a focus() sobre la ref del campo siguiente dentro de onSubmitEditing te da el comportamiento habitual de pulsar Return para bajar por el formulario.
Teclados y autocompletado
keyboardType cambia las teclas que ve la persona; nunca valida lo que escribe. Un campo decimal-pad puede recibir letras pegadas, así que comprueba la cadena antes de guardarla.
autoComplete es la pista multiplataforma para el autocompletado del sistema, y textContentType es la exclusiva de iOS. Definir ambas en los campos de inicio de sesión permite que las contraseñas guardadas y los códigos de un solo uso de los mensajes se rellenen en cualquiera de las dos plataformas.
Ejemplos de TextInput
Un textarea multilínea
textAlignVertical mantiene el cursor arriba en Android, y el contador de caracteres lee directamente del estado.
Campo de correo que pasa el foco al campo siguiente
returnKeyType="next" pone la etiqueta a la tecla, y onSubmitEditing enfoca el campo de contraseña a través de su ref.
Props de TextInput, valores y valores por defecto
Prop
Valores o tipo
Por defecto
Plataforma
Qué hace
value / onChangeText
string / (text) => void
Ambas
Texto controlado y el callback que recibe cada cadena nueva
defaultValue
Ambas
Texto inicial cuando no controlas el valor
Ambas
Pista que se muestra mientras el campo está vacío
placeholderTextColor
Ambas
Color del texto del placeholder
Ambas
Permite varias líneas; el textarea de React Native
numberOfLines
Ambas
Máximo de líneas visibles; en iOS solo con la New Architecture