React Native gives us pre build Alert dialog box to show alert messages on application screen but that Alert is old fashioned and dose not come with any modifications like adding images and customized layout. We can make our own Alert Dialog Box using Modal component, So in this tutorial we would going to Create Material Style Custom Alert Dialog Box in Android iOS React Native App with OK and CANCEL button Example Tutorial. The Alert Dialog Box is a small View windows that shows on the application screen on a specific task to going further or need additional information from application user.
Contents in this project Create Custom Alert Dialog Box in Android iOS React Native App Example Tutorial:
1. Import Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity, Alert } from ‘react-native’;
|
2. Create a State named as Alert_Visibility, which is used to Show and Hide the Modal(Alert Dialog).
|
1
2
3
4
5
6
7
8
9
10
|
constructor(props) {
super(props);
this.state = {
Alert_Visibility: false
};
}
|
3. Create a function named as Show_Custom_Alert(), This function is used to Show and Hide the Alert Dialog Box.
|
1
2
3
4
5
|
Show_Custom_Alert(visible) {
this.setState({Alert_Visibility: visible});
}
|
4. Crate a function named as ok_Button(), which would call on OK button onPress event.
|
1
2
3
4
5
|
ok_Button=()=>{
Alert.alert(“OK Button Clicked.”);
}
|
5. Create a Root View in render’s return block, This view would be our Main Root View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
6. Create a Modal component inside Root View, This would be our Custom Alert Dialog Box.
visible : This prop is used to show and hide the Modal using State.
transparent : Makes the Modal background transparent.
- True : The modal background is Transparent.
- False : Modal background is not Transparent.
animationType : User can decide whether he wants to show modal with some special effects, below is its properties.
- Slide : Modal slides from bottom to top with animation.
- fade : Modal shows with fade in out effect.
- none : Without any screen effect.
onRequestClose : It will override the back button in Android and hide Alert Dialog Box on back button press.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<Modal
visible={this.state.Alert_Visibility}
transparent={false}
animationType={“fade”}
onRequestClose={ () => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } >
</Modal>
</View>
);
}
|
7. Create Custom Alert Dialog View inside Modal 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
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
|
render() {
return (
<View style={styles.MainContainer}>
<Modal
visible={this.state.Alert_Visibility}
transparent={false}
animationType={“fade”}
onRequestClose={ () => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } >
<View style={{ flex:1, alignItems: ‘center’, justifyContent: ‘center’ }}>
<View style={styles.Alert_Main_View}>
<Text style={styles.Alert_Title}>Custom Alert Dialog Title.</Text>
<View style={{ width: ‘100%’, height: 2, backgroundColor: ‘#fff’}} />
<Text style={styles.Alert_Message}> Are You Sure(Alert Dialog Message). </Text>
<View style={{ width: ‘100%’, height: 1, backgroundColor: ‘#fff’}} />
<View style={{flexDirection: ‘row’, height: ‘30%’}}>
<TouchableOpacity
style={styles.buttonStyle}
onPress={this.ok_Button}
activeOpacity={0.7}
>
<Text style={styles.TextStyle}> OK </Text>
</TouchableOpacity>
<View style={{ width: 1, height: ‘100%’, backgroundColor: ‘#fff’}} />
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} }
activeOpacity={0.7}
>
<Text style={styles.TextStyle}> CANCEL </Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</View>
);
}
|
8. Creating A button component After closing the modal component, This button would show the Alert dialog at first time on screen.
|
1
|
<Button onPress={() => { this.Show_Custom_Alert(true) }} title=“Click Here To Show Custom Alert Dialog” />
|
9. Creating Style.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: (Platform.OS == ‘ios’) ? 20 : 0
},
Alert_Main_View:{
alignItems: ‘center’,
justifyContent: ‘center’,
backgroundColor : “#009688”,
height: 200 ,
width: ‘90%’,
borderWidth: 1,
borderColor: ‘#fff’,
borderRadius:7,
},
Alert_Title:{
fontSize: 25,
color: “#fff”,
textAlign: ‘center’,
padding: 10,
height: ‘28%’
},
Alert_Message:{
fontSize: 22,
color: “#fff”,
textAlign: ‘center’,
padding: 10,
height: ‘42%’
},
buttonStyle: {
width: ‘50%’,
height: ‘100%’,
justifyContent: ‘center’,
alignItems: ‘center’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
fontSize: 22,
marginTop: –5
}
});
|
10. 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity, Alert } from ‘react-native’;
export default class Mynewproject extends Component {
constructor(props) {
super(props);
this.state = {
Alert_Visibility: false
};
}
Show_Custom_Alert(visible) {
this.setState({Alert_Visibility: visible});
}
ok_Button=()=>{
Alert.alert(“OK Button Clicked.”);
}
render() {
return (
<View style={styles.MainContainer}>
<Modal
visible={this.state.Alert_Visibility}
transparent={false}
animationType={“fade”}
onRequestClose={ () => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } >
<View style={{ flex:1, alignItems: ‘center’, justifyContent: ‘center’ }}>
<View style={styles.Alert_Main_View}>
<Text style={styles.Alert_Title}>Custom Alert Dialog Title.</Text>
<View style={{ width: ‘100%’, height: 2, backgroundColor: ‘#fff’}} />
<Text style={styles.Alert_Message}> Are You Sure(Alert Dialog Message). </Text>
<View style={{ width: ‘100%’, height: 1, backgroundColor: ‘#fff’}} />
<View style={{flexDirection: ‘row’, height: ‘30%’}}>
<TouchableOpacity
style={styles.buttonStyle}
onPress={this.ok_Button}
activeOpacity={0.7}
>
<Text style={styles.TextStyle}> OK </Text>
</TouchableOpacity>
<View style={{ width: 1, height: ‘100%’, backgroundColor: ‘#fff’}} />
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} }
activeOpacity={0.7}
>
<Text style={styles.TextStyle}> CANCEL </Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<Button onPress={() => { this.Show_Custom_Alert(true) }} title=“Click Here To Show Custom Alert Dialog” />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: (Platform.OS == ‘ios’) ? 20 : 0
},
Alert_Main_View:{
alignItems: ‘center’,
justifyContent: ‘center’,
backgroundColor : “#009688”,
height: 200 ,
width: ‘90%’,
borderWidth: 1,
borderColor: ‘#fff’,
borderRadius:7,
},
Alert_Title:{
fontSize: 25,
color: “#fff”,
textAlign: ‘center’,
padding: 10,
height: ‘28%’
},
Alert_Message:{
fontSize: 22,
color: “#fff”,
textAlign: ‘center’,
padding: 10,
height: ‘42%’
},
buttonStyle: {
width: ‘50%’,
height: ‘100%’,
justifyContent: ‘center’,
alignItems: ‘center’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
fontSize: 22,
marginTop: –5
}
});
|
Screenshots in Android device :
Screenshots in iOS device :
Also Read :
How to Use React Native Vector Icons Library in Android iOS App Example Tutorial
React Native Solve unable to resolve module AccessibilityInfo Error in New Project
React Native Walkthrough Tooltip NPM – Android iOS Example
System UI isn’t responding Android Emulator React Native Error Solution
React Native Scroll Down To Bottom and Scroll To Top in ListView Android iOS Example
