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 –

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
this.setState({
 textLength: ''
})

//render method for checking length
render(){
return(){
//type the character into input box, in which we find the length
<TextInput multiline={true}
onChangeText={(user_description)=>this.checkDescriptionLimit(user_description)}
value={this.state.user_description}
maxLength={100}
numberOfLines={6}>
</TextInput>
//this line shows the number of character written into box
<Text>{this.state.textLength}/{maxLength}</Text>
}
}
//defining the method of checkDescriptionLimit
checkDescriptionLimit = (user_description) =>{
var Value = user_description.length.toString();
this.setState({
textLength:Value,
user_description
});
}

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.

Neha Dwivedi

Hi, I am a professional Ionic and React Native Pixel Perfect App Designer and Developer, with expertise in Client Communication, Bug Fixing, Third Party Lib, Version Control Tools, Requirement Understanding, and managing teams, I have 6+ years of experience in the same domain as well as in Codeigniter, JS, IoT, and more than 10 other languages. For the last 6+ years, not a single day went without design/development.

Please follow me on Medium: https://nehadwivedi1004.medium.com/