Sunday, August 4, 2019

React Native Create Custom Alert Dialog Box

This tutorial explains how to create custom alert dialog box in react native application using Model component. React Native provide us pre build Alert dialog box to show alert messages on application screen but it has some limitation like user can't display images in dialog box. For that we need to create custom dialog box and in this example we are going to create similar dialog box using model component in react native application.

React Native Create Custom Alert Dialog Box


React Native Create Custom Alert Dialog Box

Lets see the below steps that helps to create custom alert dialog box in react native application with simple example.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.
import React, { Component } from 'react';
import { Text, StyleSheet, View, Modal, TouchableOpacity, Button, Alert  } from 'react-native';

Step 4: create constructor block inside App component, which define state variable named as Alert_Visibility, which is used to Show and Hide the Modal(Alert Dialog).
 constructor(props) {
    super(props);
    this.state = {
      Alert_Visibility: false
    };
  }

Step 5: Create a function named as cancelAlertBox, This function is used to Show and Hide the Alert Dialog Box.
 cancelAlertBox(visible) {
    this.setState({ Alert_Visibility: visible });
  }

Step 6: Create a function named as okButton, which would call on OK button onPress event.
  okButton = () => {
    Alert.alert("OK Button Clicked.");
  }

Step 7: create App component and place the below code inside the App component.

Create a Modal component inside Root View, This would be Custom Alert Dialog Box.

visible : This prop is used to show and hide the Modal using State.

transparent : Makes the Modal background transparent.
  • True : The modal background is Transparent.
  • False : Modal background is not Transparent.

animationType : User can decide whether he wants to show modal with some special effects, below is its properties.
  • Slide : Modal slides from bottom to top with animation.
  • fade : Modal shows with fade in out effect.
  • none : Without any screen effect.

onRequestClose : It will override the back button in Android and hide Alert Dialog Box on back button press.
render() {
    return (
      <View style={styles.container} >
        <Modal
          visible={this.state.Alert_Visibility}
          transparent={false}
          animationType={"fade"}
          onRequestClose={() => { this.cancelAlertBox(!this.state.Alert_Visibility) }} >

          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

            <View style={styles.MainAlertView}>

              <Text style={styles.AlertTitle}>Custom Alert Dialog Box Title.</Text>
              <View style={{ width: '100%', height: 0.5, backgroundColor: '#fff' }} />

              <Text style={styles.AlertMessage}> Are You Sure ?? </Text>

              <View style={{ width: '100%', height: 0.5, backgroundColor: '#fff' }} />

              <View style={{ flexDirection: 'row', height: '30%' }}>
                <TouchableOpacity style={styles.buttonStyle} onPress={this.okButton} activeOpacity={0.7} >
                  <Text style={styles.TextStyle}> OK </Text>
                </TouchableOpacity>

                <View style={{ width: 0.5, height: '100%', backgroundColor: '#fff' }} />

                <TouchableOpacity style={styles.buttonStyle} onPress={() => { this.cancelAlertBox(!this.state.Alert_Visibility) }} activeOpacity={0.7} >
                  <Text style={styles.TextStyle}> CANCEL </Text>
                </TouchableOpacity>
              </View>

            </View>
          </View>
        </Modal>

        <Button onPress={() => { this.cancelAlertBox(true) }} color="#f73378" title="Custom Alert Dialog Box" />
      </View>
    );
  }

Step 8: Apply the below style sheet design. 
const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
     MainAlertView: {
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: "#1769aa", 
      height: 200,
      width: '90%',      
      borderColor: '#fff',
    },
    AlertTitle: {
      fontSize: 25,
      color: "#fff",
      textAlign: 'center',
      padding: 10,
      height: '28%'
    },
    AlertMessage: {
      fontSize: 22,
      color: "#fff",
      textAlign: 'center',
      textAlignVertical: 'center',
      padding: 10,
      height: '40%'
    },
    buttonStyle: {
      width: '50%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center'
    },
    TextStyle: {
      color: '#fff',
      textAlign: 'center',
      fontSize: 22,
      marginTop: -5
    }
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to create custom alert dialog box in react native application with simple example.

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


export default class App extends Component {

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

  cancelAlertBox(visible) {
    this.setState({ Alert_Visibility: visible });
  }

  okButton = () => {
    Alert.alert("OK Button Clicked.");
  }

  render() {
    return (
      <View style={styles.container} >
        <Modal
          visible={this.state.Alert_Visibility}
          transparent={false}
          animationType={"fade"}
          onRequestClose={() => { this.cancelAlertBox(!this.state.Alert_Visibility) }} >

          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

            <View style={styles.MainAlertView}>

              <Text style={styles.AlertTitle}>Custom Alert Dialog Box Title.</Text>
              <View style={{ width: '100%', height: 0.5, backgroundColor: '#fff' }} />

              <Text style={styles.AlertMessage}> Are You Sure ?? </Text>

              <View style={{ width: '100%', height: 0.5, backgroundColor: '#fff' }} />

              <View style={{ flexDirection: 'row', height: '30%' }}>
                <TouchableOpacity style={styles.buttonStyle} onPress={this.okButton} activeOpacity={0.7} >
                  <Text style={styles.TextStyle}> OK </Text>
                </TouchableOpacity>

                <View style={{ width: 0.5, height: '100%', backgroundColor: '#fff' }} />

                <TouchableOpacity style={styles.buttonStyle} onPress={() => { this.cancelAlertBox(!this.state.Alert_Visibility) }} activeOpacity={0.7} >
                  <Text style={styles.TextStyle}> CANCEL </Text>
                </TouchableOpacity>
              </View>

            </View>
          </View>
        </Modal>

        <Button onPress={() => { this.cancelAlertBox(true) }} color="#f73378" title="Custom Alert Dialog Box" />
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
     MainAlertView: {
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: "#1769aa", 
      height: 200,
      width: '90%',      
      borderColor: '#fff',
    },
    AlertTitle: {
      fontSize: 25,
      color: "#fff",
      textAlign: 'center',
      padding: 10,
      height: '28%'
    },
    AlertMessage: {
      fontSize: 22,
      color: "#fff",
      textAlign: 'center',
      textAlignVertical: 'center',
      padding: 10,
      height: '40%'
    },
    buttonStyle: {
      width: '50%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center'
    },
    TextStyle: {
      color: '#fff',
      textAlign: 'center',
      fontSize: 22,
      marginTop: -5
    }
  });

Screenshot : 

React Native Create Custom Alert Dialog Box

React Native Create Custom Alert Dialog Box

React Native Create Custom Alert Dialog Box

This is all about React Native Create Custom Alert Dialog Box. 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