React-native alert dialog box

React-native alert dialog

Hi Guys, In this article, we are going to learn about react-native alert dialog box, React-native use Operating system theme to display alert dialogs means, in Android device dialog displays like android default alert dialogs and in iOS device dialog displays like android default alert dialogs, in this article we are exploring different types of the alert dialog box, for this React-native provide inbuild component i.e. Alert. we have to import this component from react-native let’s see with an example,

React-native alert dialog

1. Create a new project

Create a new project using the following command, In my case, I am using my previous project

react-native init projectName

2. Import the following components

import React, { Component } from 'react'; 
import { Alert, Button, View, StyleSheet } from 'react-native';

3. Function for single option alert dialog

simpleAlertFunction = () => {
  //function to make simple alert
  Alert.alert('Alert Title','This is Simple Alert');
}

As you saw above there is the first string is Alert dialog title and the second string is the message.

4. Function to display two options alert dialog

twoOptionsAlertFunction = () => {
    //function to make two option alert
    Alert.alert(
       //This is title
      'Hello',
        //This is body text
      'This is two option alert.',
      [
        {text: 'Yes', onPress: () => console.log('Yes Pressed')},
        {text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
      ],
      { cancelable: false }
      //on clicking out side, Alert will not dismiss
    );
  }

This is two options alert dialog it displays two buttons

5. Function for three options alert dialog react-native

  threeOptionsAlertFunction=()=>{
    Alert.alert(
      //This is title
      'Hello',
      //This is body text
      'This is three option alert.',
      [
        {text: 'May be', onPress: () => console.log('May be Pressed')},
        {text: 'Yes', onPress: () => console.log('Yes Pressed')},
        {text: 'No', onPress: () => console.log('OK Pressed')},
      ],
      { cancelable: true }
    );
  }

The above function display three button options

Let’s see the full source code for the same

6. Source code alert dialog box

import React, { Component } from 'react'; 
import { Alert, Button, View, StyleSheet } from 'react-native';

export default class Home extends Component {

    simpleAlertFunction = () => {
      //function to make simple alert
      Alert.alert('Alert Title','This is Simple Alert');
    }
  twoOptionsAlertFunction = () => {
    //function to make two option alert
    Alert.alert(
       //This is title
      'Hello',
        //This is body text
      'This is two option alert.',
      [
        {text: 'Yes', onPress: () => console.log('Yes Pressed')},
        {text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
      ],
      { cancelable: false }
      //on clicking out side, Alert will not dismiss
    );
  }
  threeOptionsAlertFunction = () => {
    Alert.alert(
      //This is title
      'Hello',
      //This is body text
      'This is three option alert.',
      [
        {text: 'May be', onPress: () => console.log('May be Pressed')},
        {text: 'Yes', onPress: () => console.log('Yes Pressed')},
        {text: 'No', onPress: () => console.log('OK Pressed')},
      ],
      { cancelable: true }
    );
  }
  render() {
    return (
      <View style={styles.container}>
        {/*Simple alert*/}
        <View style={{marginVertical: 10}}>
        <Button title='Display Simple Alert' onPress={this.simpleAlertFunction}/>
        </View>
        {/*Alert with two options*/}
        <View style={{marginVertical: 10}}>
        <Button title='Display Alert with Two Options' onPress={this.twoOptionsAlertFunction}/>
        </View>
        <View style={{marginVertical: 10}}>
        {/**Alert with three options*/}
        <Button title='Display Alert with Three Options' onPress={this.threeOptionsAlertFunction}/>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    justifyContent: 'center'
  },
});

As you can see in the above source code, I have used three buttons and call arrow functions to display the react-native alert dialog box.

7. OutputsReact-native alert dialog box

React-native alert dialog boxReact-native alert dialog box

Thank you 🙂

Leave a Reply

Your email address will not be published.