React Native TextInput

 React Native TextInput

React Native TextInput - A basic part for contributing text into the application by means of a console. Props give configurability to a few elements, like auto-revision, auto-capitalization, placeholder text, and different console types, like a numeric keypad.

React Native TextInput

The most essential use case is to thud down a TextInput and buy into the onChangeText occasions to peruse the client input. There are additionally different occasions, for example, onSubmitEditing and onFocus that can be bought into. A negligible model:

Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless Text");
  const [number, onChangeNumber] = React.useState(null);

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default UselessTextInput;

Two strategies uncovered through the local component are .concentration() and .obscure() that will concentration or obscure the TextInput automatically.

Note that a few props are just accessible with multiline={true/false}. Furthermore, line styles that apply to just a single side of the component (e.g., borderBottomColor, borderLeftWidth, and so on) won't be applied if multiline=true. To accomplish a similar impact, you can envelop your TextInput by a View:

import React from 'react';
import { View, TextInput } from 'react-native';

const UselessTextInput = (props) => {
  return (
    <TextInput
      {...props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
      editable
      maxLength={40}
    />
  );
}

const UselessTextInputMultiline = () => {
  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');

  // If you type something in the text box that is a color, the background will change to that
  // color.
  return (
    <View
      style={{
        backgroundColor: value,
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}>
      <UselessTextInput
        multiline
        numberOfLines={4}
        onChangeText={text => onChangeText(text)}
        value={value}
        style={{padding: 10}}
      />
    </View>
  );
}

export default UselessTextInputMultiline;

TextInput has of course a boundary at the lower part of its view. This line has its cushioning set by the foundation picture given by the framework, and it can't be changed. Answers for keep away from this are to either not set level expressly, in which case the framework will deal with showing the boundary in the right position, or to not show the line by setting underlineColorAndroid to straightforward.

Note that on Android performing text determination in an information can change the application's movement windowSoftInputMode param to adjustResize. This might cause issues with parts that have position: 'outright' while the console is dynamic. To stay away from this conduct either determine windowSoftInputMode in AndroidManifest.xml ( https://developer.android.com/guide/subjects/manifest/movement element.html ) or control this param automatically with local code.

Props

allowFontScaling​

Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.

autoCapitalize​

Tells TextInput to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad.

• characters: all characters.
• words: first letter of each word.
• sentences: first letter of each sentence (default).
• none: don't auto capitalize anything.