TouchableOpacity has its Prop named as disabled={}, which is used to Enable and Disable the TouchableOpacity Button State. disabled={} prop support value in Boolean format . If we would set disabled={true} then it will automatically Disable the TouchableOpacity Button state and the button will no longer in work. If we would set the disabled={false} then it will Enable the TouchableOpacity button. So in this tutorial we would Create Disabled Button State and Fade In button color on Disable situation and Highlight button on button activation.
Contents in this project Create Disabled Button State Using TouchableOpacity :
1. Import StyleSheet, View, Button, Text, TouchableOpacity and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, Text, TouchableOpacity, Alert } from ‘react-native’;
|
2. Create constructor() in your class. Now make 2 States in constructor(). First is ButtonStateHolder which is used to set TouchableOpacity Button State. It accepts value in Boolean form. Second is ButtonTitle which is used to Set TouchableOpacity inside Text component Text.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
constructor(){
super();
this.state={
// Default Value for ButtonStateHolder State. Now the button is Enabled.
ButtonStateHolder : false,
// Default Text for Button Title.
ButtonTitle : ‘Button Enabled’
}
}
|
3. Create function named as DisableButtonFunction() . Inside this function we would change the Both ButtonStateHolder state and ButtonTitle value.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
DisableButtonFunction =()=>{
this.setState({
// On State True it will Disable the button.
ButtonStateHolder : true ,
ButtonTitle : ‘Button Disabled’
})
}
|
4. Create another function named as SampleButtonFunction() . We would call this function on TouchableOpacity onPress event.
|
1
2
3
4
5
6
|
SampleButtonFunction=()=>
{
Alert.alert(‘Button Clicked’) ;
}
|
5. Create a Root View in render’s return block. This view is our Main container View.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer} >
</View>
);
}
|
6. Create a button using TouchableOpacity component in Root View. As you can see in below code we are using the disabled={} prop with ButtonStateHolder State. If the ButtonStateHolder value is True then it will disable the button and if the ButtonStateHolder value is False then it will Enable the button. We would also setting up TouchableOpacity Button color using State with the combination of Ternary operator. So if ButtonStateHolder value is true then it will load Fade background color and if the ButtonStateHolder value is False then it will load the real color.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render() {
return (
<View style={styles.MainContainer} >
<TouchableOpacity style={[styles.ButtonStyle, { backgroundColor: this.state.ButtonStateHolder ? ‘#607D8B’ : ‘#009688’ }]}
activeOpacity = { .5 }
disabled={this.state.ButtonStateHolder}
onPress={this.SampleButtonFunction} >
<Text style={styles.TextStyle}> {this.state.ButtonTitle} </Text>
</TouchableOpacity>
</View>
);
}
|
7. Add Disable Above Button Button component and call the DisableButtonFunction() on button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
render() {
return (
<View style={styles.MainContainer} >
<TouchableOpacity style={[styles.ButtonStyle, { backgroundColor: this.state.ButtonStateHolder ? ‘#607D8B’ : ‘#009688’ }]}
activeOpacity = { .5 }
disabled={this.state.ButtonStateHolder}
onPress={this.SampleButtonFunction} >
<Text style={styles.TextStyle}> {this.state.ButtonTitle} </Text>
</TouchableOpacity>
<Button title=‘Disable Above Button’ onPress={this.DisableButtonFunction} />
</View>
);
}
|
8. Create Style Classes :
|
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’,
alignItems: ‘center’,
margin: 20
},
ButtonStyle: {
paddingTop:10,
paddingBottom:10,
borderRadius:5,
marginBottom: 20,
width: ‘70%’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
9. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, Text, TouchableOpacity, Alert } from ‘react-native’;
export default class MyProject extends Component {
constructor(){
super();
this.state={
// Default Value for ButtonStateHolder State. Now the button is Enabled.
ButtonStateHolder : false,
// Default Text for Button Title.
ButtonTitle : ‘Button Enabled’
}
}
DisableButtonFunction =()=>{
this.setState({
// On State True it will Disable the button.
ButtonStateHolder : true ,
ButtonTitle : ‘Button Disabled’
})
}
SampleButtonFunction=()=>
{
Alert.alert(‘Button Clicked’) ;
}
render() {
return (
<View style={styles.MainContainer} >
<TouchableOpacity style={[styles.ButtonStyle, { backgroundColor: this.state.ButtonStateHolder ? ‘#607D8B’ : ‘#009688’ }]}
activeOpacity = { .5 }
disabled={this.state.ButtonStateHolder}
onPress={this.SampleButtonFunction} >
<Text style={styles.TextStyle}> {this.state.ButtonTitle} </Text>
</TouchableOpacity>
<Button title=‘Disable Above Button’ onPress={this.DisableButtonFunction} />
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 20
},
ButtonStyle: {
paddingTop:10,
paddingBottom:10,
borderRadius:5,
marginBottom: 20,
width: ‘70%’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshot shot in Android mobile application :
Screenshot in iOS mobile application :
Also Read :
React Native Highlight Some Text Within Text String Yellow Color
React Native Solve Warning componentwillmount is Deprecated and will be Removed in the Next Major Version
Call External Local JS File Activity in Current App.js File in React Native
React Native Transform Scale Animation Android iOS Example
React Native Show Border Around Text Component Android iOS
