Sunday, June 2, 2019

How to show an alert in React Native

This tutorial explains how to show alert message in react native application. In react native we are having Alert component that helps to display alert message in user screen. Launches an alert dialog with the specified title and message. Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button. This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, see AlertIOS; entering text in an alert is common on iOS only.

How to show an alert in React Native

Alert API is used to show a static alert on Android and iOS devices. We can create one Alert with one Alert title, Alert message and optionally a list of different buttons. For Android, we can define up to 3 buttons and for iOS, unlimited buttons. Android Alerts can have neutral, negative and a positive button. alert() method is used for creating an alert. This method is defined as below :
static alert(title, message?, buttons?, options? type?)

Following are the different type of Alerts in React Native:
  1. Simple Alert.
  2. Two Option Alert.
  3. Three Option.



React Native Alert Message Example : 

Lets see the complete source code App.js component that helps to display alert message in react native application

App.js 
import React, { Component } from 'react';
import { AppRegistry, View, Button, Alert, StyleSheet, Platform } from 'react-native';


export default class App extends Component {

  simpleAlertHandler = () => {
    //function to make simple alert
    alert('Hello I am Simple Alert');
  }

  twoOptionAlertHandler = () => {
    //function to make two option alert
    Alert.alert(
      //title
      'Hello',
      //body
      'I am two option alert. Do you want to cancel me ?',
      [
        { text: 'Yes', onPress: () => console.log('Yes Pressed') },
        { text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel' },
      ],
      { cancelable: false }
      //clicking out side of alert will not cancel
    );
  }

  threeOptionAlertHandler = () => {
    //function to make three option alert
    Alert.alert(
      //title
      'Hello',
      //body
      'I am three option alert. Do you want to cancel me ?',
      [
        { text: 'May be', onPress: () => console.log('May be Pressed') },
        { text: 'Yes', onPress: () => console.log('Yes Pressed') },
        { text: 'OK', onPress: () => console.log('OK Pressed') },
      ],
      { cancelable: true }
    );
  }

  render() {
    return (
      <View style={styles.container}>

        {/*To generate simple alert*/}
        <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
          <Button
            onPress={this.simpleAlertHandler}
            title="Simple Alert"
            color="#90A4AE"
          />
        </View>

        {/*To generate two option alert*/}
        <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
          <Button
            onPress={this.twoOptionAlertHandler}
            title="Alert with Two Options"
            color="#EC407A"
          />
        </View>

        {/*To generate three option alert*/}
        <View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
          <Button
            onPress={this.threeOptionAlertHandler}
            title="Alert with Three Options"
            color="#1DE9B6"
          />
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
    
  });

Screenshot : 

How to show an alert in React Native

How to show an alert in React Native

How to show an alert in React Native

How to show an alert in React Native

This is all about showing alert message in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment