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.
1 2 3 |
import React, { Component } from 'react'; import { View, StyleSheet, TextInput, Alert } from 'react-native'; |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ShowMaxAlert = (EnteredValue) =>{ var TextLength = EnteredValue.length.toString() ; if(TextLength == 10){ Alert.alert("Sorry, You have reached the maximum input limit.") // Put your code here which you want to execute when TextInput entered text reached to 10. } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
render() { return ( <View style={styles.MainContainer}> <TextInput placeholder="Enter Your Name" maxLength={10} onChangeText={ EnteredValue => this.ShowMaxAlert(EnteredValue) } style={styles.TextInputStyle} /> </View> ); } |
4. Create Style for View and TextInput .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 }, TextInputStyle:{ width: '90%', textAlign: 'center', height: 45 } }); |
5. Complete source code for App.js File :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import React, { Component } from 'react'; import { View, StyleSheet, TextInput, Alert } from 'react-native'; export default class MyProject extends Component { ShowMaxAlert = (EnteredValue) =>{ var TextLength = EnteredValue.length.toString() ; if(TextLength == 10){ Alert.alert("Sorry, You have reached the maximum input limit.") // Put your code here which you want to execute when TextInput entered text reached to 10. } } render() { return ( <View style={styles.MainContainer}> <TextInput placeholder="Enter Your Name" maxLength={10} onChangeText={ EnteredValue => this.ShowMaxAlert(EnteredValue) } style={styles.TextInputStyle} /> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 }, TextInputStyle:{ width: '90%', textAlign: 'center', height: 45 } }); |
Screenshot in Android device :

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 ?