React Native Set TextInput maxLength Validation iOS Android Example

The maxLength={} prop is used to set restriction on TextInput, that user cannot enter more than defined characters inside the TextInput. maxLength is also a type of Validation that limits the maximum number of character entered inside TextInput. So in this tutorial we would going to create a react native app and Set TextInput maxLength Validation inside iOS Android app and show alert dialog message when entered value reaches the defined max Length.

Contents in this project Set TextInput maxLength Validation in iOS Android App React Native Example:

1. Import View, StyleSheet, TextInput and Alert component in your app.

2. Create a function named as ShowMaxAlert(). Inside this function we would first get the TextInput inside entered value. Now we would calculate the typed value length using .length() function and store the entered string length inside a variable. In final step we would set a if condition in function that checks the length of string == your defined max length. If it reaches that length then it will show us a alert message that ” Sorry, You have reached the maximum input limit. ” or you can place your message here.

3. Create a Root View in render’s return block and make a TextInput component inside the root view. We would set the Maximum input limit on TextInput using maxLength={} prop.

4. Create Style for View and TextInput .

5. Complete source code for App.js File :

Screenshot in Android device :

Set TextInput maxLength ValidationScreenshot  in iOS device :

2 Comments

  1. Hi ,
    How can i validate TextInput to take only decimal digits upto 2digits. Kindly help!!!!

    • Yash you want to take only two decimal numbers like 0 to 99 in text input only and if user enters another number it will show us a error that please enter number between 0 to 99 . like this ?

Leave a Reply

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