¿Cómo crear una entrada de texto con texto auxiliar en react-native?

React native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

requisitos previos:

• Conocimientos básicos de reactjs .
• Html, css y javascript con sintaxis ES6.
• NodeJs debe estar instalado en su sistema ( install ).
• Jdk y Android Studio para probar su aplicación en el emulador ( instalar ).

Enfoque: en este artículo, veremos cómo crear una entrada de texto que muestre texto auxiliar justo debajo. Usaremos una biblioteca de papel nativo reactivo para mostrar textos de ayuda. El texto auxiliar muestra las sugerencias. Puede ser un texto que ayude al usuario a completar el campo de entrada o puede mostrar un texto de error. Veremos el enfoque paso a paso.

A continuación se muestra la implementación paso a paso:

Paso 1: Cree un proyecto en react-native usando el siguiente comando:

npx react-native init DemoProject

Paso 2: instale el papel nativo reactivo con el siguiente comando:

npm install react-native-paper

Paso 3: Cree una carpeta de componentes dentro de su proyecto. Dentro de la carpeta de componentes, cree un archivo HelperText.js.

Estructura del proyecto: Se verá así.

Ejemplo: Anote el código en los archivos respectivos. En HelperText.js, hemos importado HelperText y TextInput de la biblioteca react-native-paper. HelperText usa el tipo de accesorios y visible:

• type: Puede tomar cualquiera de los dos valores según el requerimiento.
• visible: Puede ser verdadero o falso para mostrar u ocultar las pistas.

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { HelperText, TextInput } from 'react-native-paper';
  
const HelperTextExample = () => {
  const [emailId, setEmailId] = useState('');
  const [platform, setPlatform] = useState('');
  
  const checkErrors = () => {
    return !emailId.includes('@');
  };
  
  const checkString = () => {
    return platform === 'Geeks';
  };
  
  return (
    <View style={styles.container}>
      <TextInput
        label="Learning Platform"
        value={platform}
        onChangeText={(text) => setPlatform(text)}
      />
      <HelperText visible={checkString()}>Geeks for Geeks</HelperText>
  
      <TextInput label="Email" value={emailId} 
      onChangeText={(text) => setEmailId(text)} />
      <HelperText type="error" visible={checkErrors()}>
        Email Id is invalid
      </HelperText>
    </View>
  );
};
  
export default HelperTextExample;
  
const styles = StyleSheet.create({
  container: {
    padding: 25,
  },
});

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
  
import HelperTextExample from './components/HelperText';
  
const App: () => Node = () => {
  return (
    <View>
      <HelperTextExample />
    </View>
  );
};
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npx react-native run-android

Producción:

Referencia: https://callstack.github.io/react-native-paper/helper-text.html