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 :
Screenshot in iOS device :
Also Read :
React Native Apply Pinch to Zoom Effect on Image iOS Android Example Tutorial
Create File Picker in React Native Android iOS Example Tutorial
React Native Get Clicked Position of Touch Screen Coordinates using PanResponder iOS Android Tutorial
Example of React Native Action Button | Floating Action Button
React Native New ImageBackground Component iOS Android Example
