How to count length of text entered into the textInput

React Native Textinput Max Length:

Here we are going to discuss the topic “How to count length of text entered into the textInput“.

I’m a big fan of React Native, because it is very easy to implement designs and complex concepts, in below example i am going to explain you in detail how to count the length of text in a very simple way.

Where we count the length of text entered into the text input box as well as provide a limit for input characters, so let’s start the topic.

Output example – - react native textinput count

There is more than one way to restrict the input field, here i am provide 2 – way.

Way 1 :

Here we take a global variable for max length and one state variable for text length and when it reaches it’s max length, it not take the more text.

//declare the variable globally
var maxLength = 100;

//set the state
 textLength: ''

//render method for checking length
//type the character into input box, in which we find the length
<TextInput multiline={true}
//this line shows the number of character written into box
//defining the method of checkDescriptionLimit
checkDescriptionLimit = (user_description) =>{
var Value = user_description.length.toString();

Way 2 :

In this way we are using the maxLength props of text input for restrict the input field.

<TextInput value={this.state.text} maxLength={4} />

So the topic  “How to count length of text entered into the textInput ” is completed, you can find the next lesson here.

You can find my post on medium as well click here please follow me on medium as well.

If have any query/issue, please feel free to ask.

Happy Coding Guys.

Related Post

Leave a Reply

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