How to use text input in React Native

Syntax

The text input field tag is self-closing and contains different propsProperties short form.

import { TextInput } from 'react-native';

<TextInput
  // Add props here
/>

In the above syntax:

In the first line, the TextInput component is imported from the react-native library.
<TextInput/>: The component is used to render an input field in the app.
props: They can be added to the TextInput component to customize its behavior and appearance. The TextInput component has Android and iOS-specific props that can be used to customize its behavior and appearance on each platform.

Properties

Below is the list of some important props classified according to what they do:

Styling and layout:

style: It sets the style properties for the input field. The StyleSheet.create component can be used to create CSS classes that define the styles for the input field.
multiline: It enables multiple-line text in the input field.
numberOfLines: It is used when the multiline prop is enabled and specifies the number of lines of text the input field should display.
placeholderTextColor: It is used to set the color of the placeholder text.

Behavior and interaction:

autoFocus: It is used to specify whether the input field should be focused automatically when the app is displayed.
blurOnSubmit: It is used to specify whether the input field should be blurred when the user submits the text by pressing the return key or some other submit action. It is set to true by default.
defaultValue: It is used to specify the default value for the input field. This value will be displayed in the input field before the user enters any text.
maxLength: It is used to specify the maximum length of the text that the input field can accept. It can limit the amount of text the user can enter in the input field.
onBlur: It is a callback function that is called when the input field is blurred. It can be used to call a user-defined function that handles the blur event for the input field.
onChangeText : It is a callback function that is called whenever the text in a TextInput element changes.
onFocus: It is a callback function used to call a user-defined function when the TextInput field is focused.
onSubmitEditing: It is callback function used to call user-defined function when the return key is pressed, or text is submitted.
placeholder : It is used to specify placeholder text shown in the input field when empty. The placeholder text hints to the user about what kind of input is expected in the field.
selectTextOnFocus: It is used to select the text in the text input space when the input field is focused.
secureTextEntry: It is used to set the input field as password type.

Other properties

The following props may work when rendering output on mobile or an emulator.

selectionColor: It is used to set the color of the selected text when using the text input.
allowFontScaling: It is used to control whether the font size should be scaled according to the user’s Text Size accessibility setting. By default, it is set to true, which means the font size will be scaled according to the user’s setting.
autoCapitalize: It is used to control if certain characters should be automatically capitalized when the user types them. This property is only supported for some keyboard types, so you should check the documentation for more information.
autoComplete: It is used on Android devices to enable the autofill feature. When this prop is set to true, the system will attempt to autofill the text input using heuristics to identify the type of content being entered.
autoCorrect: It is used to enable the auto-correction feature when the user is typing. This feature will automatically correct common typos and spelling errors as the user types.
caretHidden: It is used to hide the cursor in the text input box while the user is typing.
contextMenuHidden: It is used to hide the context menu. The default value is false.
cursorColor: It is used to set the cursor color.
editable: It is used to prevent the user from editing the text in the text input box.
enablesReturnKeyAutomatically : It is used to disable the return key on the keyboard when there is no text in the text input box.
keyboardType: It is used to specify the type of keyboard that should be used when the user is typing in the text input.
returnKeyLabel: It is used to set the label of the return key on the keyboard. This prop is only supported on Android devices, so it will not have any effect on iOS devices.

This list is not comprehensive, but it provides us with a basic understanding.

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

const Text_info = () => {
  const [text, setText] = React.useState('');
  const [number, setNumber] = React.useState('');
  const [submit, setSubmit] = React.useState('');

  const handleChange = (enterText) => {
    setText(enterText);
  };

  const handleOnBlur = () => {
    setNumber('Blur');
  };

  const handleOnFocus = () => {
    setNumber('Focus');
    setSubmit("");
  };

  const handleSubmit = () => {
    setSubmit("Submited");
  };

  return (
    <View style={styles.container}>
      <Text style={{ padding: 10, fontSize: 36, marginTop: 100 }}>
        Enter Your Text to Capitalize
      </Text>
      <TextInput
        style={styles.input}
        placeholderTextColor="green"
        placeholder="Enter text"
        onBlur={handleOnBlur}
        onChangeText={handleChange}
        onFocus={handleOnFocus}
        onSubmitEditing={handleSubmit}
        selectTextOnFocus={true}
      />
      <Text style={{ padding: 10, fontSize: 20 }}>
        You entered: {text.toUpperCase()}
      </Text>
      <Text style={{ padding: 10, fontSize: 20 }}>
        Text Input Field is: {number}
      </Text>
      <Text style={{ padding: 10, fontSize: 20 }}>Text is: {submit}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 10,
    borderWidth: 1,
    padding: 10,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Text_info;

Text Handling

Explanation

Line 26: In this line the TextInput is defined and it closed on line 56.
Line 35: In this line the onBlur callback function is used which call handleOnBlur which is defined in lines 13-15.
Line 36: In this line the onChangeText callback function is used which call handleChange which is defined in lines 9-11.
Line 37: In this line the onFocus callback function is used which call handleOnFocus which is defined in lines 17-20.
Line 38: In this line the onSubmitEditing callback function is used which calls handlsubmit which is defined in lines 22-24.

Free Resources