Sometimes developer needs to set restriction or limit to TextInput typed text so the user cannot enter more then defined limit text. So in this tutorial we would going to create a react native application that Count TextInput Inside Text Length Automatically and Show count in Text Component at application run time using
.length string function.
Note : Blank Space is also count as text.
Contents in this project Count TextInput Inside Text Length Automatically in React Native :
1. Import StyleSheet, View, TextInput and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, TextInput, Text } from ‘react-native’;
|
2. Create a state named as TextValue in constructor().
|
1
2
3
4
5
6
7
8
9
10
|
constructor()
{
super();
this.state={
TextValue : ”
}
}
|
3. Create a function named as GetValueFunction with single Argument. Now we would get the received value length using
.length string function and store the length into a Var Value variable. After getting length in Value we would store this length into TextValue State. This State is used inside our Text component.
|
1
2
3
4
5
6
7
|
GetValueFunction = (ValueHolder) =>{
var Value = ValueHolder.length.toString() ;
this.setState({TextValue : Value}) ;
}
|
4. Create a Root View in render’s return box with 1 TextInput and 1 Text component. We would also set the TextValue state into Text component.
|
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}>
<Text style={styles.TextStyle}> { this.state.TextValue } </Text>
<TextInput
placeholder=“Enter Text here”
onChangeText={ ValueHolder => this.GetValueFunction(ValueHolder) }
style={styles.TextInputStyle}
/>
</View>
);
}
|
5. Create Style for Root View and TextInput and Text component.
|
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
|
const styles = StyleSheet.create(
{
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
margin: 10
},
TextInputStyle:{
textAlign: ‘center’,
height: 50,
width: ‘90%’
},
TextStyle: {
textAlign: ‘center’,
fontSize: 25
}
});
|
6. 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
63
64
65
66
67
68
69
70
71
72
73
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, TextInput, Text } from ‘react-native’;
export default class MyProject extends Component {
constructor()
{
super();
this.state={
TextValue : ”
}
}
GetValueFunction = (ValueHolder) =>{
var Value = ValueHolder.length.toString() ;
this.setState({TextValue : Value}) ;
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.TextStyle}> { this.state.TextValue } </Text>
<TextInput
placeholder=“Enter Text here”
onChangeText={ ValueHolder => this.GetValueFunction(ValueHolder) }
style={styles.TextInputStyle}
/>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
margin: 10
},
TextInputStyle:{
textAlign: ‘center’,
height: 50,
width: ‘90%’
},
TextStyle: {
textAlign: ‘center’,
fontSize: 25
}
});
|
Screenshot in Android app :
Screenshot in iOS device :
Also Read :
React Native Create Picker Spinner Using Dynamic JSON MySQL Data
React Native Create Custom Sliding Drawer Using Animation iOS Android
React Native Share API example to Share TextInput message from App
Create Gradient Shade Effect Button in React Native Android iOS Example
How to change Image border width in React Native Tutorial
