Entrada de texto

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Componente fundamental para ingresar texto en la aplicación mediante teclado. Las props permiten configurar varias funcionalidades como autocorrección, autocapitalización, texto de marcador de posición y diferentes tipos de teclados como el numérico.

El caso de uso más básico es colocar un TextInput y suscribirse a los eventos onChangeText para leer la entrada del usuario. También hay otros eventos disponibles como onSubmitEditing y onFocus a los que puedes suscribirte. Un ejemplo mínimo:

Dos métodos expuestos a través del elemento nativo son .focus() y .blur(), que permiten enfocar o desenfocar el TextInput mediante programación.

Ten en cuenta que algunas props solo están disponibles con multiline={true/false}. Además, los estilos de borde que se aplican a un solo lado del elemento (ej. borderBottomColor, borderLeftWidth, etc.) no se aplicarán si multiline=true. Para lograr el mismo efecto, puedes envolver tu TextInput en una View:

TextInput tiene un borde inferior predeterminado en su vista. Este borde tiene su padding definido por la imagen de fondo del sistema y no puede modificarse. Las soluciones para evitarlo son: no establecer explícitamente la altura (el sistema mostrará el borde correctamente) o ocultar el borde configurando underlineColorAndroid como transparente.

Nota: en Android, seleccionar texto en un input puede cambiar el parámetro windowSoftInputMode de la actividad a adjustResize. Esto puede causar problemas con componentes que usan position: 'absolute' cuando el teclado está activo. Para evitarlo, especifica windowSoftInputMode en AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) o controla este parámetro mediante código nativo.

---

Referencia

Props

Props de View

Hereda Props de View.

---

allowFontScaling

Especifica si las fuentes deben escalar respetando la configuración de accesibilidad de Tamaño de texto. Por defecto es true.

Type
bool

---

autoCapitalize

Indica a TextInput que capitalice automáticamente ciertos caracteres. Esta propiedad no es compatible con algunos tipos de teclado como name-phone-pad.

• characters: todos los caracteres.

• words: primera letra de cada palabra.

• sentences: primera letra de cada oración (predeterminado).

• none: no capitaliza nada automáticamente.

Type
enum('none', 'sentences', 'words', 'characters')

---

autoComplete

Especifica sugerencias de autocompletado para que el sistema proporcione autofill. En Android, el sistema siempre intentará ofrecer autofill usando heurísticas. Para desactivarlo, establece autoComplete en off.

Los siguientes valores funcionan en todas las plataformas:

• additional-name

• address-line1

• address-line2

• birthdate-day (iOS 17+)

• birthdate-full (iOS 17+)

• birthdate-month (iOS 17+)

• birthdate-year (iOS 17+)

• cc-csc (iOS 17+)

• cc-exp (iOS 17+)

• cc-exp-day (iOS 17+)

• cc-exp-month (iOS 17+)

• cc-exp-year (iOS 17+)

• cc-number

• country

• current-password

• email

• family-name

• given-name

• honorific-prefix

• honorific-suffix

• name

• new-password

• off

• one-time-code

• postal-code

• street-address

• tel

• username

iOS

Los siguientes valores solo funcionan en iOS:

• cc-family-name (iOS 17+)

• cc-given-name (iOS 17+)

• cc-middle-name (iOS 17+)

• cc-name (iOS 17+)

• cc-type (iOS 17+)

• nickname

• organization

• organization-title

• url

Android

Los siguientes valores solo funcionan en Android:

• gender

• name-family

• name-given

• name-middle

• name-middle-initial

• name-prefix

• name-suffix

• password

• password-new

• postal-address

• postal-address-country

• postal-address-extended

• postal-address-extended-postal-code

• postal-address-locality

• postal-address-region

• sms-otp

• tel-country-code

• tel-device

• tel-national

• username-new

Type

enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new')

---

autoCorrect

Si es false, desactiva la corrección automática. El valor predeterminado es true.

Type
bool

---

autoFocus

Si es true, enfoca el campo automáticamente. El valor predeterminado es false.

Type
bool

---

blurOnSubmit

Obsoleto. Ten en cuenta que submitBehavior ahora reemplaza a blurOnSubmit y anulará cualquier comportamiento definido por blurOnSubmit. Consulta submitBehavior

Si es true, el campo de texto perderá el foco al ser enviado. El valor predeterminado es true para campos de una línea y false para multilínea. En campos multilínea, establecer blurOnSubmit como true hace que al presionar Enter se pierda el foco y se dispare onSubmitEditing, en lugar de insertar un salto de línea.

Type
bool

---

caretHidden

Si es true, oculta el cursor de texto. El valor predeterminado es false.

Type
bool

---

clearButtonMode

iOS

Cuando debe aparecer el botón de borrado en el lado derecho del campo. Esta propiedad solo es compatible con componentes TextInput de una línea. El valor predeterminado es never.

Type
enum('never', 'while-editing', 'unless-editing', 'always')

---

clearTextOnFocus

iOS

Si es true, borra automáticamente el contenido del campo al comenzar la edición.

Type
bool

---

contextMenuHidden

Si es true, oculta el menú contextual. El valor predeterminado es false.

Type
bool

---

dataDetectorTypes

iOS

Determina qué tipos de datos se convierten en URLs clickeables dentro del campo. Solo es válido cuando multiline={true} y editable={false}. Por defecto no se detecta ningún tipo de dato.

Puedes proporcionar un tipo o un array de varios tipos.

Los valores posibles para dataDetectorTypes son:

• 'phoneNumber'

• 'link'

• 'address'

• 'calendarEvent'

• 'none'

• 'all'

Type
enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')

---

defaultValue

Proporciona un valor inicial que cambiará cuando el usuario comience a escribir. Útil para casos donde no quieras gestionar eventos ni actualizar la propiedad value para mantener sincronizado el estado controlado.

Type
string

---

disableKeyboardShortcuts

iOS

Si es true, se deshabilitan los atajos de teclado (botones deshacer/rehacer y copiar).

Type	Default
bool	false

---

cursorColor

Android

Cuando se proporciona, establece el color del cursor (o "caret") en el componente. A diferencia de selectionColor, el color del cursor se establecerá independientemente del color del cuadro de selección de texto.

Type
color

---

disableFullscreenUI

Android

Cuando es false, si hay poco espacio disponible alrededor del campo de texto (ej. orientación horizontal en teléfono), el SO puede hacer que el usuario edite el texto en modo pantalla completa. Cuando es true, esta función se desactiva y los usuarios siempre editarán directamente en el campo. Por defecto es false.

Type
bool

---

editable

Si es false, el texto no es editable. El valor por defecto es true.

Type
bool

---

enablesReturnKeyAutomatically

iOS

Si es true, el teclado deshabilita la tecla Enter cuando no hay texto y la habilita automáticamente cuando hay texto. El valor por defecto es false.

Type
bool

---

enterKeyHint

Determina qué texto debe mostrarse en la tecla Enter. Tiene prioridad sobre la prop returnKeyType.

Los siguientes valores funcionan en todas las plataformas:

• done

• next

• search

• send

• go

Solo Android

Los siguientes valores solo funcionan en Android:

• previous

Solo iOS

Los siguientes valores solo funcionan en iOS:

• enter

Type
enum('enter', 'done', 'next', 'previous', 'search', 'send', 'go')

---

importantForAutofill

Android

Indica al SO si los campos individuales de tu app deben incluirse en una estructura de vista para autocompletado en Android API Nivel 26+. Valores posibles: auto, no, noExcludeDescendants, yes, yesExcludeDescendants. Por defecto es auto.

• auto: Permite que el sistema Android use sus heurísticas para determinar si la vista es importante para autocompletado.

• no: Esta vista no es importante para autocompletado.

• noExcludeDescendants: Esta vista y sus hijos no son importantes para autocompletado.

• yes: Esta vista es importante para autocompletado.

• yesExcludeDescendants: Esta vista es importante para autocompletado, pero sus hijos no lo son.

Type
enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants')

---

inlineImageLeft

Android

Si se define, el recurso de imagen proporcionado se renderizará a la izquierda. El recurso debe estar en /android/app/src/main/res/drawable y referenciarse como:

<TextInput
 inlineImageLeft='search_icon'
/>

Type
string

---

inlineImagePadding

Android

Espaciado entre la imagen en línea (si existe) y el campo de texto.

Type
number

---

inputAccessoryViewID

iOS

Identificador opcional que vincula un InputAccessoryView personalizado a este campo. El InputAccessoryView se renderiza sobre el teclado cuando este campo tiene foco.

Type
string

---

inputAccessoryViewButtonLabel

iOS

Etiqueta opcional que sobrescribe la etiqueta predeterminada del botón de InputAccessoryView.

Por defecto, la etiqueta del botón predeterminada no está localizada. Utiliza esta propiedad para proporcionar una versión localizada.

Type
string

---

inputMode

Funciona como el atributo inputmode en HTML: determina qué teclado abrir (ej. numeric) y tiene prioridad sobre keyboardType.

Admite los siguientes valores:

• none

• text

• decimal

• numeric

• tel

• search

• email

• url

Type
enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url')

---

keyboardAppearance

iOS

Determina el color del teclado.

Type
enum('default', 'light', 'dark')

---

keyboardType

Determina qué teclado abrir, ej. numeric.

Consulta capturas de pantalla de todos los tipos aquí.

Los siguientes valores funcionan en todas las plataformas:

• default

• number-pad

• decimal-pad

• numeric

• email-address

• phone-pad

• url

Solo iOS

Los siguientes valores solo funcionan en iOS:

• ascii-capable

• numbers-and-punctuation

• name-phone-pad

• twitter

• web-search

Solo Android

Los siguientes valores solo funcionan en Android:

• visible-password

Type
enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password')

---

lineBreakStrategyIOS

iOS

Establece la estrategia de salto de línea en iOS 14+. Valores posibles: none, standard, hangul-word y push-out.

Type	Default
enum('none', 'standard', 'hangul-word', 'push-out')	'none'

---

lineBreakModeIOS

iOS

Establece el modo de salto de línea en iOS. Valores posibles: wordWrapping, char, clip, head, middle y tail.

Type	Default
enum('wordWrapping', 'char', 'clip', 'head', 'middle', 'tail')	'wordWrapping'

---

maxFontSizeMultiplier

Especifica la escala máxima que puede alcanzar una fuente cuando allowFontScaling está activado. Valores posibles:

• null/undefined (predeterminado): hereda del nodo padre o del valor global (0)

• 0: sin máximo, ignora el valor padre/global

• >= 1: establece el maxFontSizeMultiplier de este nodo a este valor

Type
number

---

maxLength

Limita el número máximo de caracteres que se pueden ingresar. Usa esto en lugar de implementar la lógica en JS para evitar parpadeos.

Type
number

---

multiline

Si es true, el campo de texto puede tener múltiples líneas. El valor predeterminado es false.

nota

Es importante notar que esto alinea el texto en la parte superior en iOS y lo centra en Android. Usa textAlignVertical establecido en top para un comportamiento uniforme en ambas plataformas.

Type
bool

---

numberOfLines

nota

numberOfLines en iOS solo está disponible en la Nueva Arquitectura

Establece el número máximo de líneas para un TextInput. Úsalo con multiline establecido en true para poder llenar las líneas.

Type
number

---

onBlur

Callback que se llama cuando el campo de texto pierde el foco.

Nota: Si intentas acceder al valor text de nativeEvent, ten en cuenta que el valor resultante puede ser undefined, lo que puede causar errores inesperados. Si buscas el último valor de TextInput, puedes usar el evento onEndEditing, que se dispara al finalizar la edición.

Type
({nativeEvent: TargetEvent}) => void

---

onChange

Callback que se llama cuando cambia el texto del campo de texto.

Type
({nativeEvent: {eventCount, target, text}}) => void

---

onChangeText

Callback que se llama cuando cambia el texto del campo de texto. El texto modificado se pasa como un único argumento de tipo string al manejador del callback.

Type
function

---

onContentSizeChange

Callback que se llama cuando cambia el tamaño del contenido del campo de texto.

Solo se llama para campos de texto multilínea.

Type
({nativeEvent: {contentSize: {width, height} }}) => void

---

onEndEditing

Callback que se llama cuando finaliza la edición del campo de texto.

Type
function

---

onPressIn

Callback que se llama cuando se inicia un toque.

Type
({nativeEvent: PressEvent}) => void

---

onPressOut

Callback que se llama cuando se libera un toque.

Type
({nativeEvent: PressEvent}) => void

---

onFocus

Callback que se llama cuando el campo de texto recibe el foco.

Type
({nativeEvent: TargetEvent}) => void

---

onKeyPress

Callback que se llama cuando se presiona una tecla. Se llama con un objeto donde keyValue es 'Enter' o 'Backspace' para las teclas respectivas y el carácter tecleado en otros casos, incluyendo ' ' para el espacio. Se dispara antes de los callbacks onChange. Nota: en Android solo se manejan las entradas del teclado en pantalla, no las del teclado físico.

Type
({nativeEvent: {key: keyValue} }) => void

---

onLayout

Se invoca al montar y en cambios de diseño.

Type
({nativeEvent: LayoutEvent}) => void

---

onScroll

Se invoca al desplazar el contenido. Puede contener otras propiedades de ScrollEvent, pero en Android contentSize no se proporciona por razones de rendimiento.

Type
({nativeEvent: {contentOffset: {x, y} }}) => void

---

onSelectionChange

Callback que se llama cuando cambia la selección del texto en el campo.

Type
({nativeEvent: {selection: {start, end} }}) => void

---

onSubmitEditing

Callback que se llama cuando se presiona el botón de envío del campo de texto.

Type
({nativeEvent: {text, eventCount, target}}) => void

Ten en cuenta que en iOS este método no se llama cuando se usa keyboardType="phone-pad".

---

placeholder

La cadena que se mostrará antes de que se ingrese texto en el campo.

Type
string

---

placeholderTextColor

El color del texto de la cadena de placeholder.

Type
color

---

readOnly

Si es true, el texto no es editable. El valor por defecto es false.

Type
bool

---

returnKeyLabel

Android

Establece la etiqueta de la tecla de retorno. Úsalo en lugar de returnKeyType.

Type
string

---

returnKeyType

Determina cómo debe verse la tecla de retorno. En Android también puedes usar returnKeyLabel.

Multi plataforma

Los siguientes valores funcionan en todas las plataformas:

• done

• go

• next

• search

• send

Solo Android

Los siguientes valores solo funcionan en Android:

• none

• previous

Solo iOS

Los siguientes valores solo funcionan en iOS:

• default

• emergency-call

• google

• join

• route

• yahoo

Type
enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')

rejectResponderTermination

iOS

Si es true, permite que TextInput pase eventos táctiles al componente padre. Esto permite que componentes como SwipeableListView sean deslizables desde el TextInput en iOS, como ocurre por defecto en Android. Si es false, TextInput siempre solicita manejar la entrada (excepto cuando está deshabilitado). El valor predeterminado es true.

Type
bool

---

rows

Android

Establece el número de líneas para un TextInput. Úsalo con multiline establecido en true para poder llenar las líneas.

Type
number

---

scrollEnabled

iOS

Si es false, se deshabilitará el desplazamiento de la vista de texto. El valor predeterminado es true. Solo funciona con multiline={true}.

Type
bool

---

secureTextEntry

Si es true, el campo de texto oculta el contenido ingresado para mantener seguros textos sensibles como contraseñas. El valor predeterminado es false. No funciona con multiline={true}.

Type
bool

---

selection

El inicio y final de la selección de texto en el input. Establece start y end con el mismo valor para posicionar el cursor.

Type
object: {start: number,end: number}

---

selectionColor

Color del resaltado, manija de selección y cursor del campo de texto.

Type
color

---

selectionHandleColor

Android

Establece el color de la manija de selección. A diferencia de selectionColor, permite personalizar el color de la manija independientemente del color de la selección.

Type
color

---

selectTextOnFocus

Si es true, todo el texto se seleccionará automáticamente al enfocar.

Type
bool

---

showSoftInputOnFocus

Cuando es false, previene que aparezca el teclado virtual al enfocar el campo. El valor predeterminado es true.

Type
bool

---

smartInsertDelete

iOS

Si es false, el sistema iOS no insertará un espacio adicional después de pegar texto ni eliminará uno o dos espacios después de cortar o borrar.

Type	Default
bool	true

---

spellCheck

iOS

Si es false, desactiva el subrayado rojo de corrección ortográfica. El valor predeterminado se hereda de autoCorrect.

Type
bool

---

submitBehavior

Cuando se presiona la tecla de retorno:

Para inputs de una sola línea:

• 'newline' por defecto se comporta como 'blurAndSubmit'

• undefined por defecto se comporta como 'blurAndSubmit'

Para inputs multilínea:

• 'newline' agrega una nueva línea

• undefined por defecto se comporta como 'newline'

Para ambos tipos de inputs:

• 'submit' solo envía un evento submit sin desenfocar el input

• 'blurAndSubmit' desenfoca el input y envía un evento submit

Type
enum('submit', 'blurAndSubmit', 'newline')

---

textAlign

Alinea el texto ingresado al lado izquierdo, centro o derecho del campo.

Los valores posibles para textAlign son:

• left (izquierda)

• center (centro)

• right (derecha)

Type
enum('left', 'center', 'right')

---

textContentType

iOS

Proporciona al teclado y al sistema información sobre el significado semántico esperado del contenido que ingresan los usuarios.

nota

autoComplete ofrece la misma funcionalidad y está disponible en todas las plataformas. Puedes usar Platform.select para comportamientos específicos de plataforma.

Evita usar textContentType y autoComplete simultáneamente. Por compatibilidad hacia atrás, textContentType tiene prioridad cuando ambas propiedades están configuradas.

Puedes establecer textContentType como username o password para habilitar el autocompletado de credenciales desde el llavero del dispositivo.

newPassword puede usarse para indicar un campo de nueva contraseña que el usuario quizá quiera guardar en el llavero, y oneTimeCode puede usarse para campos que pueden autocompletarse con códigos recibidos por SMS.

Para deshabilitar el autocompletado, establece textContentType en none.

Los valores posibles para textContentType son:

• none

• addressCity

• addressCityAndState

• addressState

• birthdate (iOS 17+)

• birthdateDay (iOS 17+)

• birthdateMonth (iOS 17+)

• birthdateYear (iOS 17+)

• countryName

• creditCardExpiration (iOS 17+)

• creditCardExpirationMonth (iOS 17+)

• creditCardExpirationYear (iOS 17+)

• creditCardFamilyName (iOS 17+)

• creditCardGivenName (iOS 17+)

• creditCardMiddleName (iOS 17+)

• creditCardName (iOS 17+)

• creditCardNumber

• creditCardSecurityCode (iOS 17+)

• creditCardType (iOS 17+)

• emailAddress

• familyName

• fullStreetAddress

• givenName

• jobTitle

• location

• middleName

• name

• namePrefix

• nameSuffix

• newPassword

• nickname

• oneTimeCode

• organizationName

• password

• postalCode

• streetAddressLine1

• streetAddressLine2

• sublocality

• telephoneNumber

• URL

• username

Type

enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username')

---

passwordRules

iOS

Al usar textContentType como newPassword en iOS, podemos informar al sistema operativo los requisitos mínimos de la contraseña para que genere una que los cumpla. Para crear una cadena válida para PasswordRules, consulta la documentación de Apple.

Si no aparece el diálogo de generación de contraseñas, asegúrate de:

• Que AutoFill está activado: Settings → Passwords & Accounts → activa AutoFill Passwords,
• Que se usa iCloud Keychain: Settings → Apple ID → iCloud → Keychain → activa iCloud Keychain.

Type
string

---

style

Ten en cuenta que no todos los estilos de texto son compatibles. Una lista incompleta de lo que no se admite incluye:

• borderLeftWidth

• borderTopWidth

• borderRightWidth

• borderBottomWidth

• borderTopLeftRadius

• borderTopRightRadius

• borderBottomRightRadius

• borderBottomLeftRadius

Estilos

Type
Text

---

textBreakStrategy

Android

Establece la estrategia de ruptura de texto en Android API Level 23+. Los valores posibles son simple, highQuality, balanced. El valor predeterminado es highQuality.

Type
enum('simple', 'highQuality', 'balanced')

---

underlineColorAndroid

Android

El color del subrayado del TextInput.

Type
color

---

value

El valor a mostrar en la entrada de texto. TextInput es un componente controlado, lo que significa que el valor nativo se forzará a coincidir con esta propiedad value si se proporciona. Para la mayoría de usos funciona bien, pero en algunos casos puede causar parpadeo. Una causa común es prevenir ediciones manteniendo el mismo valor. Además de establecer el mismo valor, configura editable={false} o establece/actualiza maxLength para evitar ediciones no deseadas sin parpadeo.

Type
string

Métodos

.focus()

tsx

focus();

Hace que la entrada nativa solicite el foco.

.blur()

tsx

blur();

Hace que la entrada nativa pierda el foco.

clear()

tsx

clear();

Elimina todo el texto del TextInput.

---

isFocused()

tsx

isFocused(): boolean;

Devuelve true si la entrada tiene el foco actualmente; false en caso contrario.

Problemas conocidos

• react-native#19096: No es compatible con onKeyPreIme de Android.

• react-native#19366: Llamar a .focus() después de cerrar el teclado de Android mediante el botón de retroceso no vuelve a mostrar el teclado.

• react-native#26799: No es compatible con secureTextEntry de Android cuando keyboardType="email-address" o keyboardType="phone-pad".