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.

import React, { Component } from 'react';
 
import { View, StyleSheet, TextInput, Alert } from 'react-native';

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.

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.

      }

    
     }

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.

render() {
       return (
    
          <View style={styles.MainContainer}>
            
              <TextInput
                    
                placeholder="Enter Your Name"

                maxLength={10}
            
                onChangeText={ EnteredValue => this.ShowMaxAlert(EnteredValue) }
            
                style={styles.TextInputStyle}
              />
            
          </View>
               
       );
     }

render() {

return (

<TextInput

placeholder="Enter Your Name"

maxLength={10}

onChangeText={ EnteredValue => this.ShowMaxAlert(EnteredValue) }

style={styles.TextInputStyle}

</View>

);

}

4. Create Style for View and TextInput .

const styles = StyleSheet.create(
{
  
  MainContainer: {
 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10
 
  },
 
  TextInputStyle:{
 
    width: '90%',
    textAlign: 'center',
    height: 45
  }
 
});

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 :

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
  }
 
});