TextInput comes with prop editable={Boolean Value}, This prop can Enable Disable TextInput input value dynamically. If the value of editable={false} then it will disable the complete TextInput component and restricts the application user to enter or type any value inside it. If the value of editable={true} then it will Enable the TextInput and user can now enter value inside it.
What we are doing in this tutorial(Must Read) :
We are creating 2 TextInput component in our project and by default disable the 2nd TextInput using editable={false}. We would use the State to set the True and False value. Now when user starts typing value in 1st TextInput then it will call a runtime prop event onChangeText={} in first TextInput which will store its value in a variable and along with it will a function. Inside the function we would check the Text length and if the length is more then zero(0) then it will enable the 2nd TextInput using State. We would also change the border color or 2nd TextInput so it look like it will highlight.
Contents in this project Enable Disable TextInput Programmatically in Android iOS React Native app:
1. Import View, TextInput and StyleSheet component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { View, TextInput, StyleSheet } from ‘react-native’;
|
2. Create a State named as TextInputDisableHolder as Boolean type and store False inside it.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state={
TextInputDisableHolder : false
}
}
|
3. Create a function named as DisableTextInput() with Value argument. Inside this function we would first check the entered text length in 1st TextInput and if the length is !=(Not Equals) to 0 then it will set True in TextInputDisableHolder State.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
DisableTextInput =(Value)=>{
var EnteredTextLength = Value.length.toString() ;
if(EnteredTextLength != 0){
this.setState({TextInputDisableHolder : true})
}
else
{
this.setState({TextInputDisableHolder : false})
}
}
|
4. Create a Root View in render’s return block. This is our main container view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
5. Create 2 TextInput component in Root View. We would set the editable={ } prop in 2nd Text Input.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Your First Name”
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
onChangeText={ Value => this.DisableTextInput(Value) }
/>
<TextInput
placeholder=“Enter Your Last Name”
underlineColorAndroid=‘transparent’
style={[styles.TextInputStyleClass, { borderColor: this.state.TextInputDisableHolder ? ‘#009688’ : ‘#607D8B’ }]}
editable={this.state.TextInputDisableHolder}
/>
</View>
);
}
|
6. Create Style for TextInput and View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const styles = StyleSheet.create(
{
MainContainer: {
flex: 1,
justifyContent: ‘center’,
margin: 10
},
TextInputStyleClass:{
textAlign: ‘center’,
height: 40,
borderRadius: 10 ,
borderWidth: 2,
borderColor: ‘#009688’,
backgroundColor : “#FFF”,
marginBottom: 10
}
});
|
7. 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import React, { Component } from ‘react’;
import { View, TextInput, StyleSheet } from ‘react-native’;
export default class MyProject extends Component {
constructor(){
super();
this.state={
TextInputDisableHolder : false
}
}
DisableTextInput =(Value)=>{
var EnteredTextLength = Value.length.toString() ;
if(EnteredTextLength != 0){
this.setState({TextInputDisableHolder : true})
}
else
{
this.setState({TextInputDisableHolder : false})
}
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Your First Name”
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
onChangeText={ Value => this.DisableTextInput(Value) }
/>
<TextInput
placeholder=“Enter Your Last Name”
underlineColorAndroid=‘transparent’
style={[styles.TextInputStyleClass, { borderColor: this.state.TextInputDisableHolder ? ‘#009688’ : ‘#607D8B’ }]}
editable={this.state.TextInputDisableHolder}
/>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer: {
flex: 1,
justifyContent: ‘center’,
margin: 10
},
TextInputStyleClass:{
textAlign: ‘center’,
height: 40,
borderRadius: 10 ,
borderWidth: 2,
borderColor: ‘#009688’,
backgroundColor : “#FFF”,
marginBottom: 10
}
});
|
Screenshots in Android device :
Screenshots in iOS device :
Also Read :
React Native User Registration with Local PhpMyAdmin MySQL Database iOS Android Tutorial
React Native Apply Real Time Search Bar Filter on FlatList JSON Data Example Tutorial
Wish You All a Very Very Happy New Year 2019
React Native Pass TextInput Entered Value From One Activity Screen to Another
How to Create Custom Circle Round Oval Shape View in React Native
