React Native | TextInput

Hello React Native Friends,

Today, I will explain the React Native TextInput component in detail with an example.

React Native has emerged as a game-changer, providing developers with a powerful framework for building cross-platform applications. One essential component that plays a crucial role in user interaction is the TextInput.

Let’s understand the React Native TextInput component in detail.

Understanding React Native TextInput:

The TextInput component in React Native serves as the gateway for users to input text in an application. It is used to create a text input field where users can enter text. It allows users to enter text, numbers, or other input data. Its simplicity and flexibility make it an indispensable tool for developers seeking to create interactive and user-friendly forms, search bars, and other text input scenarios.

Let’s break down some attributes of React Native TextInput.

Attributes of React Native TextInput:

The TextInput component in React Native comes with a variety of attributes that allow developers to customize its behavior and appearance according to their application’s requirements. Here are some key attributes of the React Native TextInput component:

value (string):

Specifies the current value of the input. The value to be displayed in the input. This is a controlled component prop, meaning it should be controlled by the state and updated through the onChangeText prop.

<TextInput value={someState} onChangeText={(text) => setSomeState(text)}/>

onChangeText (function):

Callback function that is called when the text input’s content changes. It receives the new text value as its argument.

<TextInput onChangeText={(text) => console.log(text)} />

placeholder (string):

Defines a short hint that describes the expected input. Placeholder text is displayed when the input is empty.

<TextInput placeholder="Enter text" />

secureTextEntry (boolean):

If true, the text input obscures the text entered, useful for password input.

<TextInput secureTextEntry={true} />

keyboardType (string):

Determines which keyboard to open, such as “default,” “numeric,” “email-address,” “phone-pad,” etc.

<TextInput keyboardType="numeric" />

multiline (boolean):

Allows the input to span multiple lines. If true, the text input can display multiple lines of text.

<TextInput multiline={true} numberOfLines={4} />

autoCorrect (boolean):

Determines whether auto-correction should be enabled or disabled. If true, the input attempts to correct spelling automatically.

<TextInput autoCorrect={false} />

autoCapitalize (string):

Controls the capitalization of the text. Determines whether the keyboard should capitalize the first letter, words, sentences, or none. Options include ‘none’, ‘sentences’, ‘words’, and ‘characters’.

<TextInput autoCapitalize="none" />

editable (boolean):

Determines whether the input is editable. If false, the text input is not editable.

<TextInput editable={false} />

placeholderTextColor (string):

Sets the color of the placeholder text.

<TextInput placeholder="Enter text" placeholderTextColor="gray" />

onSubmitEditing (function):

Callback function that is called when the submit button is pressed on the keyboard.

<TextInput onSubmitEditing={() => console.log('Submit pressed')} />

returnKeyType (string):    

Determines how the return key on the keyboard should be displayed. Options include “done,” “go,” “next,” “search,” “send,” etc.

<TextInput returnKeyType="done" />

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.

<TextInput onBlur={() => handleBlur()} />

onFocus:    

It is a callback function used to call a user-defined function when the Text Input field is focused.       

<TextInput onFocus={() => handleFocus()} />

Example of React Native TextInput:

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

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [number, onChangeNumber] = React.useState('');

  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 TextInputExample;

Conclusion:

Whether you’re building a login form, a search bar, or any text input scenario, understanding the nuances of TextInput and harnessing its capabilities can significantly elevate your app’s user experience.

If you have any doubts, leave a comment here, and I will get in touch with you quickly. You can also get in touch with Experienced React Native Developers to customize your application.

Happy Coding!