React Native Alert Dialogbox | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

Showing Alert message in React Native

React Native provides built in Alert dialog component to show simple alert messages

To show customised Alert Dialogs and add more functionality to it, a Modal component can be used

The Modal component is a basic way to present content above an enclosing view

An Alert dialog appears on top of an app's content to present users with information or collect information

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcAlertApp)

react-native init NcAlertApp

This creates a directory named NcAlertApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Usage

Example usage of Alert:

Alert.alert(
  'Alert Title',
  'Some Message',
  [
    {
      text: 'Ask later',
      onPress: () => console.log('Ask later pressed')
    },
    {
      text: 'Cancel',
      onPress: () => console.log('Cancel Pressed'),
      style: 'cancel'
    },
    { text: 'OK', onPress: () => console.log('OK Pressed') }
  ],
  { cancelable: false }
);

Except first parameter, others are optional

Following are some cross-platform properties of Modal component

animationType: slide, fade or none
onRequestClose: required for Android - function to be called when user taps the hardware back button on Android or the menu button on Apple TV
onShow: function to be called when modal is shown
transparent: determines whether modal is to fill the entire view, modal is renderedover a transparent background when set to true
visible: determines visibility of the component

Properties other than onRequestClose are optional

Import

import { Modal, Alert } from 'react-native';

App Code

App.js

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

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
        visiblityBool: false
    };
  }

  showAlert(visible) {
    this.setState({visiblityBool: visible});
  }

  okBtnClick=()=>{
    Alert.alert("Ok button clicked");
  }

 render() {
   return (
      <View style={styles.container}>
        <Modal
          visible={this.state.visiblityBool}
          transparent={false}
          animationType={"fade"}
          onRequestClose={ () => { this.showAlert(!this.state.visiblityBool)} } >
            <View style={{ flex:1, alignItems: 'center', justifyContent: 'center' }}>
                <View style={styles.alertContainer}>
                    <Text style={styles.alertTitle}>Title: Stay alert?</Text>
                    <View style={{ width: '100%', height: 2, backgroundColor: '#fff'}} />
                    <Text style={styles.alertMessage}> Message : Click Cancel to close </Text>
                    <View style={{ width: '100%', height: 1, backgroundColor: '#fff'}} />
                    <View style={{flexDirection: 'row', height: '30%'}}>
                        <TouchableOpacity
                            style={styles.button}
                            onPress={this.okBtnClick}
                            activeOpacity={0.7}
                             >
                            <Text style={styles.text}> Ok </Text>
                        </TouchableOpacity>
                        <View style={{ width: 1, height: '100%', backgroundColor: '#fff'}} />
                        <TouchableOpacity
                            style={styles.button}
                            onPress={() => { this.showAlert(!this.state.visiblityBool)} }
                            activeOpacity={0.7}
                            >
                            <Text style={styles.text}> Cancel </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
        <Button onPress={() => { this.showAlert(true) }} title="Show Alert Dialog" />
      </View>
   );
 }
}

const styles = StyleSheet.create({
  container :{
   flex:1,
   justifyContent: 'center',
   alignItems: 'center',
   marginTop: (Platform.OS == 'ios') ? 20 : 0
  },

  alertContainer:{
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor : "#31a6e4",
    height: 200 ,
    width: '90%',
    borderWidth: 1,
    borderColor: '#fff',
    borderRadius:7,
  },

  alertTitle:{
    fontSize: 25,
    color: "#fff",
    textAlign: 'center',
    padding: 10,
    height: '28%'
  },

  alertMessage:{
      fontSize: 22,
      color: "#fff",
      textAlign: 'center',
      padding: 10,
      height: '42%'
    },

  button: {
      width: '50%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center'
  },

  text:{
      color:'#fff',
      textAlign:'center',
      fontSize: 22,
      marginTop: -5
  }
});