Cómo usar el componente TextInput para capturar texto

  ¿Qué es el componente TextInput en React Native?

El componente TextInput en React Native es una entrada de texto que permite a los usuarios escribir información.
Es esencial para formularios, autenticación, comentarios, búsquedas y cualquier lugar donde se necesite capturar texto.

Ejemplo básico de uso

jsx 
import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';

// Componente funcional EntradaTexto
const EntradaTexto = () => {
  // Estado para almacenar el texto ingresado
  const [nombre, setNombre] = useState('');

  // Renderiza el componente
  return (
    <View style={styles.contenedor}>
      <Text style={styles.label}>Ingresa tu nombre:</Text>
      <TextInput
        style={styles.input}
        placeholder="Escribe aquí..."
        value={nombre}
        onChangeText={setNombre}
      />
      <Text style={styles.resultado}>Hola, {nombre} 👋</Text>
    </View>
  );
};

// Estilos para el componente EntradaTexto
const styles = StyleSheet.create({
  contenedor: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
    color: '#333',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
    padding: 10,
    marginBottom: 15,
    fontSize: 16,
  },
  resultado: {
    fontSize: 18,
    color: 'dodgerblue',
  },
});

export default EntradaTexto;
  Notas

En el ejemplo anterior, creamos un componente funcional llamado EntradaTexto que utiliza el componente TextInput para capturar el nombre del usuario. El componente TextInput se encuentra dentro de un contenedor View, y tiene un estilo básico aplicado a través de StyleSheet. El estado nombre se inicializa como una cadena vacía y se actualiza cada vez que el usuario escribe en el campo de texto. El valor del TextInput se establece en el estado nombre, y la función setNombre se pasa como prop a onChangeText, lo que permite que el componente actualice su valor cada vez que el usuario escribe algo. El componente también muestra un saludo personalizado utilizando el nombre ingresado por el usuario.

¿Qué hace cada prop?

  • style: Se usa para personalizar el diseño del campo.
  • value: Es el texto actual del input (estado controlado).
  • onChangeText: Función que actualiza el estado con el nuevo texto.
  • placeholder: Texto gris que se muestra cuando el campo está vacío.

  Notas

Recorda que el componente TextInput es un componente controlado, lo que significa que su valor se gestiona a través del estado de React. El componente TextInput puede recibir varias propiedades (props) para personalizar su comportamiento y apariencia. A continuación, Aquí hay algunas de las más comunes:

jsx 
<TextInput
value={nombre}
onChangeText={setNombre}
placeholder="Escribe aquí..."
....
/>
  • value: El valor actual del campo de texto.
  • onChangeText: Función que se llama cada vez que el texto cambia.
  • placeholder: Texto que se muestra cuando el campo está vacío.
  • style: Estilos aplicados al campo de texto.
  • keyboardType: Tipo de teclado que se mostrará (ej: "default", "email-address", etc.).
  • secureTextEntry: Si es verdadero, oculta el texto ingresado (ideal para contraseñas).
  • maxLength: Limita la cantidad de caracteres que se pueden ingresar.
  • autoCapitalize: Controla la capitalización automática del texto ingresado.
  • editable: Permite o bloquea la edición del campo de texto.
  • multiline: Permite ingresar múltiples líneas de texto.
  • numberOfLines: Número de líneas visibles en el campo de texto.
  • onFocus: Función que se llama cuando el campo de texto recibe el foco.
  • onBlur: Función que se llama cuando el campo de texto pierde el foco.
  • onSubmitEditing: Función que se llama cuando el usuario presiona “Enter” o “Enviar” en el teclado.
  • returnKeyType: Tipo de tecla de retorno que se mostrará en el teclado (ej: "done", "go", etc.).
  • clearButtonMode: Muestra un botón para limpiar el campo de texto (ej: "while-editing", "unless-editing").
  • textAlign: Alineación del texto (ej: "left", "center", "right").
  • textAlignVertical: Alineación vertical del texto (ej: "top", "center", "bottom").
  • selectTextOnFocus: Selecciona el texto cuando el campo recibe el foco.
  • blurOnSubmit: Si es verdadero, el campo de texto pierde el foco al presionar “Enter” o “Enviar”.

✨ Más props útiles

Puedes mejorar la experiencia del usuario usando otras props como:

PropiedadDescripción
keyboardTypeDefine el tipo de teclado (ej: "email-address", "numeric", etc.)
secureTextEntryOculta el texto (ideal para contraseñas)
maxLengthLimita la cantidad de caracteres
autoCapitalizeControla la capitalización automática ("none", "words", etc.)
editablePermite o bloquea la edición

🔐 Ejemplo: campo de contraseña

jsx 
<TextInput
style={styles.input}
placeholder="Contraseña"
secureTextEntry={true}
/>
  Buenas prácticas

  • Usa placeholder claros para guiar al usuario.
  • No olvides validar la entrada antes de enviarla.
  • Mantén el input con buen contraste visual para accesibilidad.