Componente de entrada de texto nativo de React

En este artículo, vamos a ver cómo crear un TextInput en react-native. Para ello, vamos a utilizar el componente TextInput. Es un componente básico que se utiliza para recopilar datos de los usuarios. 

Para crear un TextInput en React Native, debemos importar el componente TextInput de React Native.

import { TextInput } from 'react-native'

Sintaxis:

<TextInput  
  // Define TextInput property
/>        

Accesorios para el componente TextInput:

• allowFontScaling: esta propiedad especificará si las fuentes se escalarán para respetar la configuración de accesibilidad de Tamaño de texto. El valor predeterminado para esto es verdadero.
• autoCapitalize: esta propiedad se utiliza para poner en mayúscula automáticamente las letras. No podemos pasar ninguno, oraciones, palabras, Caracteres como parámetro para ello. De forma predeterminada, escribe en mayúscula la primera letra de cada oración.
• autoCompleteType: esta propiedad proporcionará autocompletar para la entrada al dar sugerencias. Algunos valores que admite autoCompleteType son: apagado, contraseña, nombre de usuario, código postal, ‘correo electrónico’, dirección postal, número de cc, cc-exp-month, nombre, etc. De manera predeterminada, autoCompleteType es verdadero en todos los dispositivos Android. Para deshabilitar el autocompletado, debemos hacerlo falso.
• autocorrección: esta propiedad toma un valor booleano. Corrige el campo de entrada automáticamente pero si es falso, no lo corregirá. El valor por defecto es verdadero.
• autoFocus: si es verdadero, enfocará la entrada en el componenteDidMount. En el caso predeterminado, será falso,
• blurOnSubmit: se utiliza para desenfocar el campo de entrada al enviar. Para campos de una sola línea, el valor predeterminado es verdadero, pero para campos de varias líneas es falso.
• caretHidden: en el caso predeterminado, es falso. Pero si es cierto, el signo de intercalación estará oculto.
• clearButtonMode: Se utiliza cuando queremos que aparezca el botón borrar en el lado derecho de la vista de texto. Esto es solo para los componentes TextInput de una sola línea. El valor predeterminado es nunca.
• clearTextOnFocus: Esta propiedad se utiliza cuando queremos borrar el campo de texto automáticamente cuando comienza la edición.
• contextMenuHidden: en el caso predeterminado, es falso. Pero si es cierto, el menú contextual estará oculto.
• dataDetectorTypes: esta propiedad se utiliza para determinar el tipo de datos que se convierten en direcciones URL en las que se puede hacer clic en la entrada de texto. De forma predeterminada, no se detecta ningún tipo de datos.
• defaultValue: esta propiedad proporcionará un valor inicial cuando el usuario comience a escribir. Es útil para casos de uso en los que los usuarios no desean escribir el valor completo.
• disabledFullscreenUI: en el caso predeterminado, es falso. Esta propiedad permite a los usuarios editar el texto dentro del modo de entrada de texto de pantalla completa. Para deshabilitar esta función, debemos hacerla realidad.
• editable: si no queremos que el usuario edite la entrada de texto, podemos hacer que este valor editable sea falso. No permitirá a los usuarios editar texto desde el front-end. De forma predeterminada, el valor es verdadero.
• enableReturnKeyAutomatically: esta propiedad permitirá que el teclado habilite automáticamente la tecla de retorno cuando haya texto; de lo contrario, la tecla de retorno estará deshabilitada. El valor predeterminado de esto es falso.
• importantForAutofill: Esto indica qué campos se incluirán en la estructura de la vista para fines de autocompletar. Por defecto, es automático.
• inlineImageLeft: se utiliza para representar la imagen de la izquierda.
• inlineImagePadding: esta propiedad se utiliza para proporcionar relleno entre la imagen en línea y la entrada de texto.
• keyboardAppearance: Se utiliza para especificar el color del teclado. El color puede ser el predeterminado, claro y oscuro.
• keyboardType : Esta propiedad se utiliza para determinar el tipo de teclado que se va a abrir.
• maxFontSizeMultiplier: cuando allowFontScaling está habilitado, se usa para especificar la escala más grande que puede alcanzar una fuente.
• maxLength: Se usa cuando no queremos exceder el número particular de caracteres. Así que le proporcionamos una longitud máxima fija.
• multilínea: Esto permite tener múltiples líneas en la entrada de texto. De forma predeterminada, el valor es falso .
• numberOfLines: Se usa cuando queremos el número fijo de líneas en el TextInput.
• onBlur: se usa cuando la entrada de texto está borrosa llamando a una función de devolución de llamada donde escribimos cosas.
• onChange: siempre que haya algún cambio en TextInput, esto llamará a una función de devolución de llamada.
• onChangeText: siempre que haya algún cambio en el texto de TextInput, esto llamará a una función de devolución de llamada.
• onContentSizeChange: cuando cambia el tamaño del contenido de la entrada de texto, llama a una función de devolución de llamada.
• onEndEditing: cuando finaliza la entrada de texto, llama a una función de devolución de llamada.
• onPressOut : es una función de devolución de llamada que se llama cuando se suelta una tecla.
• onFocus: cuando la entrada de texto está enfocada, llama a una función de devolución de llamada.
• onKeyPress: Llama a una función de devolución de llamada cuando se presiona una tecla donde realizamos la tarea.
• onLayout: Es una función que se invoca cuando cambia el diseño.
• onScroll: Es una función que se invoca en el scroll del contenido.
• onSelectionChange: cuando se cambia la selección de entrada de texto. Requiere una función de devolución de llamada para realizar la tarea relacionada.
• onSubmitEditing: cuando se presiona el botón Enviar de la entrada de texto. Llama a una función de devolución de llamada para realizar una tarea relacionada con ella.
• marcador de posición: proporciona las strings que se representarán primero antes de ingresar la entrada de texto.
• placeholderTextColor: proporciona el color del texto del marcador de posición.
• returnKeyLabel: Establece la clave de retorno a la etiqueta.
• returnKeyType: Determina el aspecto de la tecla de retorno. Algunos valores de returnKeyType son ‘hecho’, ‘ir’, ‘siguiente’, ‘buscar’, ‘enviar’, ‘ninguno’, ‘anterior’, ‘predeterminado’, ‘llamada de emergencia’, ‘google’, ‘unirse’ , ‘ruta’, ‘yahoo’.
• scrollEnabled: Habilita el desplazamiento de la vista de texto. Por defecto, es cierto.
• SecureTextEntry: se utiliza para proteger datos confidenciales como contraseñas oscureciendo el texto ingresado. El valor predeterminado es falso.
• selectTextOnFocus: Se utiliza para seleccionar todo el texto automáticamente, cuando enfocamos el TextInput.
• showSoftInputOnFocus: si esto es falso , entonces cuando enfocamos el campo. Evita que se muestre el teclado virtual. El valor predeterminado para esto es verdadero.
• ortografía: Habilita el estilo de revisión ortográfica (es decir, subrayados rojos). Para deshabilitar esto, tenemos que hacer esto falso. El valor predeterminado de esto se hereda de la autocorrección.
• textAlign: esta propiedad se utiliza para alinear el texto de entrada. Los valores para textAlign son: izquierda, derecha y centro.
• textContentType: Da la información sobre el contenido que ingresan los usuarios.
• passwordRules: Se usa cuando tenemos ciertos requisitos para las contraseñas, le damos este requisito al sistema operativo.
• estilo: Es el estilo personalizado para el texto de entrada. Todos los estilos de texto no son compatibles con esto.
• underlineColorAndroid: Da el color al subrayado de TextInput.
• valor: Es el valor para la entrada de texto.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto:

Ejemplo: Ahora implementemos el componente TextInput. Dentro de ese componente, cada vez que hay algún cambio de texto, llama a la función handleText que establecerá el estado del nombre en texto. Este texto se escribirá en el componente Texto. 

import React, { Component } from 'react';
import {View,Text,TextInput } from 'react-native';
  
export default class App extends Component {
  state={
    name:"",
  }
  handleText=(text)=>{
    this.setState({name:text});
  }
  render() {
    return (
      <View>
      <TextInput
        style={{height: 50, borderColor: 'red', 
                borderWidth: 3,margin:10,
        fontSize:35,}}
        onChangeText={(text) =>this.handleText(text)}
        placeholder="Enter Name"
        value={this.state.text}
      />
      <Text style={{fontSize:32,color:'green'}}>
        Your name is :{this.state.name}
      </Text>
      </View>
    );
  }
}

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/textinput