React Native Create Alert Dialog in Android iOS Application Tutorial

Alert is basic component available in react native. Alert component is used to display a simple alert message on both android and iOS applications screen. But using Alert we can also build our own Alert Dialog in react native applications with OK, CANCEL and ASK ME LATER button. The alert dialog is completely user modified and app developer himself can set its Title, Message, Ask Me Later button text, OK button text and Cancel button text.

Contents in this project Create Alert Dialog in Android iOS Application Example :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Import AppRegistry, StyleSheet, Text, View, Button and Alert component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, Text, View, Button, Alert } from ‘react-native’;

import React, { Component } from ‘react’;

import { AppRegistry, StyleSheet, Text, View, Button, Alert } from ‘react-native’;

3. Create a function named as ShowAlertDialog() in your class. In this function we would create a Alert dialog message using Alert component.

<br />
ShowAlertDialog = () =>{</p>
<p>  Alert.alert(</p>
<p>    // This is Alert Dialog Title<br />
    ‘Alert Dialog Title’,</p>
<p>    // This is Alert Dialog Message.<br />
    ‘Alert Dialog Message’,<br />
    [<br />
      // First Text Button in Alert Dialog.<br />
      {text: ‘Ask me later’, onPress: () => console.log(‘Ask me later Button Clicked’)},</p>
<p>      // Second Cancel Button in Alert Dialog.<br />
      {text: ‘Cancel’, onPress: () => console.log(‘Cancel Button Pressed’), style: ‘cancel’},</p>
<p>      // Third OK Button in Alert Dialog<br />
      {text: ‘OK’, onPress: () => console.log(‘OK ButtonPressed’)},</p>
<p>    ]</p>
<p>  )</p>
<p>}

ShowAlertDialog = () =>{

Alert.alert(

// This is Alert Dialog Title

‘Alert Dialog Title’,

// This is Alert Dialog Message.

‘Alert Dialog Message’,

[

// First Text Button in Alert Dialog.

{text: ‘Ask me later’, onPress: () => console.log(‘Ask me later Button Clicked’)},

// Second Cancel Button in Alert Dialog.

{text: ‘Cancel’, onPress: () => console.log(‘Cancel Button Pressed’), style: ‘cancel’},

// Third OK Button in Alert Dialog

{text: ‘OK’, onPress: () => console.log(‘OK ButtonPressed’)},

]

)

}

4. Create a Root parent View inside render’s return block.

<br />
render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>     </View><br />
   );<br />
 }

render() {

return (

</View>

);

}

5. Create Button component inside Parent View and call the ShowAlertDialog() message on button onPress event.

<br />
render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>     <Button title=”Show Alert Dialog ” onPress={this.ShowAlertDialog} /></p>
<p>     </View><br />
   );<br />
 }

render() {

return (

</View>

);

}

6. Create style css class for View.

<br />
const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>// Setting up View inside content in Vertically center.<br />
justifyContent: ‘center’,<br />
flex:1,<br />
margin: 10</p>
<p>}</p>
<p>});

const styles = StyleSheet.create({

MainContainer :{

// Setting up View inside content in Vertically center.

justifyContent: ‘center’,

flex:1,

margin: 10

}

});

7. Complete source code for index.android.js / index.ios.js file:

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, Text, View, Button, Alert } from ‘react-native’;</p>
<p>class Myproject extends Component {</p>
<p>ShowAlertDialog = () =>{</p>
<p>  Alert.alert(</p>
<p>    // This is Alert Dialog Title<br />
    ‘Alert Dialog Title’,</p>
<p>    // This is Alert Dialog Message.<br />
    ‘Alert Dialog Message’,<br />
    [<br />
      // First Text Button in Alert Dialog.<br />
      {text: ‘Ask me later’, onPress: () => console.log(‘Ask me later Button Clicked’)},</p>
<p>      // Second Cancel Button in Alert Dialog.<br />
      {text: ‘Cancel’, onPress: () => console.log(‘Cancel Button Pressed’), style: ‘cancel’},</p>
<p>      // Third OK Button in Alert Dialog<br />
      {text: ‘OK’, onPress: () => console.log(‘OK ButtonPressed’)},</p>
<p>    ]</p>
<p>  )</p>
<p>}</p>
<p> render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>     <Button title=”Show Alert Dialog ” onPress={this.ShowAlertDialog} /></p>
<p>     </View><br />
   );<br />
 }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>// Setting up View inside content in Vertically center.<br />
justifyContent: ‘center’,<br />
flex:1,<br />
margin: 10</p>
<p>}</p>
<p>});</p>
<p>AppRegistry.registerComponent(‘Myproject’, () => Myproject);