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 :
Thanks bro, can you leave the source of the project?
Bro you can found the the main App.js file code here is tutorial .
Thanks a lot for “modal” usage
I want to display this custom dialog box on top of my previous screen, making the previous screen transparent on the background of the dialog box
Parth please be more specific about your requirement, You want to open activity over activity or screen view over screen view ?
how to hide the modal on click on the transparent area like android’s default popup ?
sir, how to open model on same screen not forward to another new screen..
Riyaz modal or another screen in same screen ? Please tell me