React native TextInput : How to detect a change in text and editing ends :

TextInput component is used in React native for entering text. In this tutorial, we will learn how to use a TextInput component to listen what the user is entering and when the editing ends.

We will create one simple react native application using create-react-native-app command and change its view with one TextInput and one Text below it. If the user is entering values to the TextInput, we will change the Text based on the entered text.

Detecting text change and editing ends :

TextInput comes with a lot of different props like other components of React Native. For this example we will use the following two :
1. onChangeText : It is a callback that is called if the text is changed of the text input. Changed text is passed to the callback handler as an argument.
2. onEndEditing : Callback that will be called when text input ends. Note that the text will not be passed for this props.

React Native program :

Change the code of App.js file (if this the root javascript file of your project) as like below :

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, TextInput } from "react-native";

export default class App extends Component {
  // 1
  constructor(props) {
    super(props);
    this.state = { text: "" };
  }

  //2
  changeText(inputText) {
    const formattedText = "\u{1F632}" + inputText;
    this.setState({ text: formattedText });
  }

  //3
  endEditing() {
    const formattedText = this.state.text + "\u{2708}";
    this.setState({ text: formattedText });
  }

  render() {
    //4
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.textinput}
          placeholder="Enter your text here"
          onChangeText={text => this.changeText(text)}
          onEndEditing={() => this.endEditing()}
        />
        <Text style={styles.textView}>{this.state.text}</Text>
      </View>
    );
  }
}

//5
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  },
  textinput: {
    fontSize: 30,
    textAlign: "center",
    marginTop: 60,
    marginRight: 20,
    marginLeft: 20,
    padding: 10,
    borderColor: "grey",
    borderWidth: 1,
    borderRadius: 5
  },
  textView: {
    fontSize: 40,
    marginTop: 30,
    textAlign: "center"
  }
});

Explanation :

The commented numbers in the above program denote the step number below :

1. Inside the constructor, initialize the state with an empty string value for text.
2. changeText method takes one string as input and changes the value of text in the state using setState method. It adds one Unicode character to the start of the string before setting the state. It takes one string as a parameter.
3. Similar to changeText, endEditing method adds one different Unicode character to the text of the state.
4. We are using onChangeText and onEndEditing methods here. The first one is called whenever the text is changed in the TextInput and the second one is called whenever the editing is completed. One Text is below the TextInput where the current text of the state is displayed.
5. styles hold the styles for each element in the returning view. You can configure it as you like.

Output :

It will look as below when the user is entering some text in the TextInput :
react native text input
And, when the editing is completed, i.e. if the enter key is pressed, it will look like :
react native detect change in text input
As you can see that we are changing the text before displaying it to the user during editing time and after editing is completed.

Conclusion :

Detecting the text change in TextInput comes handy if you want to validate the user input text continuously. You can also validate user input whenever the input is completed e.g. if you are checking the user is registered or not, the validity of the entered email etc. Try to implement the example we have shown above and if you have any query, drop one comment below.

Categories: react-native

Leave a Reply

Your email address will not be published. Required fields are marked *