React Native Alert is an API which is used to show an alert dialog with specified title and message. It uses an alert() method to prompt an alert dialog. This Alert dialog provides 3 different lists of buttons (combination of neutral, negative, and positive) to perform action. Pressing any of these buttons calls the onPress callback method and dismiss the alert. By default, Alert has only a positive (OK) button

 

How to show Alert?

With the alert() method we can show Alert in ReactNative.

Example:

import React, {Component} from 'react';

import {

  View,

  TextInput,

  Text,

  StyleSheet,

  Alert,

  Button,

  Keyboard,

} from 'react-native';

 

export default class AlertExample extends Component {

  showAlert1() {

    Alert.alert('React Native', 'Learning React Native?', [

      {

        text: 'No',

        onPress: () => console.log('No Pressed'),

        style: 'cancel',

      },

      {text: 'Yes', onPress: () => console.log('Yes Pressed')},

    ]);

  }

  showAlert2() {

    Alert.alert(

      'React Native Alert',

      'Alert with Three Buttons',

      [

        {

          text: 'Ask me later',

          onPress: () => console.log('Ask me later pressed'),

        },

        {

          text: 'Cancel',

          onPress: () => console.log('Cancel Pressed'),

          style: 'cancel',

        },

        {text: 'OK', onPress: () => console.log('OK Pressed')},

      ],

      {cancelable: false},

    );

  }

  render() {

    return (

      <View style={styles.container}>

        <View style={styles.header}>

          <Text>Alert Component</Text>

        </View>

        <View style={styles.body}>

          <View style={styles.buttonContainer}>

            <Button onPress={this.showAlert1} title="Button 1" />

          </View>

          <View style={styles.buttonContainer}>

            <Button

              onPress={this.showAlert2}

              title="Button 2"

              color="#009933"

            />

          </View>

        </View>

      </View>

    );

  }

}

 

const styles = StyleSheet.create({

  container: {

    backgroundColor: '#FAFAFA',

    flex: 1,

  },

  header: {

    alignItems: 'center',

    padding: 10,

    backgroundColor: 'cyan',

  },

  body: {

    backgroundColor: 'grey',

    padding: 16,

    justifyContent: 'center',

    flex: 1,

  },

  buttonContainer: {

    margin: 20,

  },

  multiButtonContainer: {

    margin: 20,

    flexDirection: 'row',

    justifyContent: 'space-between',

  },

});

 

 

Output

ReactNative Alert component

How to display Alert in React NAtive

 


Subscribe For Daily Updates