React Native popup Modal, popup menu, popup dialog, and alert dialog can be used to display a dialog with information or ask for user input and confirmation. The tutorial will walk you through the steps of creating a React Native Popup Modal with detailed explanations and example code for both.

What React Native Modal Component

React Native Modal component offers a way of displaying additional content. It is composed of two parts, the backdrop, and the modal box. The backdrop covers the overall page and dims out everything except the modal box, where additional information or user input can be visible. This modal stays until it’s instructed to close.

Uses React Native Modal

With a modal, you have complete control over user interactions. The way you respond to these interactions will manage how the user works with the application. Additionally, since modals are created with React Native, they require an understanding of styled components and higher-order functions. It’s important that you understand these concepts before you begin building a modal in React Native.

Create a React Native Project

In this example, I am creating a react native project using expo, Once you run the below scripts on terminal, it will ask for template type. So here I have selected typescript. You can use CLI also. let’s wait till complete

Define Props Interface

As you know we choose Typescript for this tutorial, so let’s define interface just like below

interface ModalProps {
  visible: boolean,
  title: string,
  message: string,
  onConfirm: () => void,
  onCancel: () => void,
  onDismiss: () => void,
  contentStyle?: StyleProp;
}

Style and Animate Your Popup Modal

In the modal component, following props are important, Let me explain each that I used in the tutorial.

animationType prop controls the modal animates,

Possible values:

• slide – slides in from the bottom,
• fade – fades into view,
• none – appears without an animation.

visible

The visible prop determines whether modal is visible

transparent

The transparent prop manages the modal will fill the entire view or not. If the props value is true modal popup over a transparent background.

function PopupModal(props: ModalProps) {
  const {
    title,
    message,
    visible,
    onCancel,
    onConfirm,
    onDismiss,
    contentStyle
  } = props;
  return (
     onDismiss()}>
        
          {/*Write react native view that you wish to display on popup modal*/}
        
  )
}

Create a Popup internal Box UI

I am creating to alert dialog UI, You can customize it based on your need. It is just an internal UI that displays over the Popup Modal.

{/* Dialog view start here*/}
{title}{message}
    
    
{/* Dialog view end here*/}

The final Component looks like below

That is all about the popup modal in react native, Your final component looks like below.

import React from 'react';
import {Button, Modal, StyleProp, StyleSheet, Text, TouchableWithoutFeedback, View, ViewStyle} from 'react-native';


interface ModalProps {
  visible: boolean,
  title: string,
  message: string,
  onConfirm: () => void,
  onCancel: () => void,
  onDismiss: () => void,
  contentStyle?: StyleProp;
}

function PopupModal(props: ModalProps) {
  const {
    title,
    message,
    visible,
    onCancel,
    onConfirm,
    onDismiss,
    contentStyle
  } = props;
  return (
     onDismiss()}>
        
          {/* Dialog view start here*/}
          {title}{message}
              
              
          {/* Dialog view end here*/}
        
  )
}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  dialogContainer: {
    shadowColor: 'black',
    shadowOffset: {width: 0, height: 2},
    shadowRadius: 4,
    backgroundColor: 'white',
    elevation: 4,
    padding: 16,
    width: '90%',
    shadowOpacity: 0.25,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    padding: 8,
    lineHeight: 24,
  },
  messageText: {
    fontSize: 16,
    padding: 8,
    lineHeight: 18,
  },
  buttonContainer: {
    marginTop: 32,
    flexDirection: 'row-reverse',
  },
  button: {
    marginLeft: 12,
  }
});
export default PopupModal;

How to use the PopupModal component

Now your component is ready to use, let’s use this component, so open the App.tsx and paste below. Now just run expo start, and choose the platform that you wish to run.

import {Button, StyleSheet, Text, View} from 'react-native';
import React, {useState} from "react";
import PopupModal from "./components/PopupModal"

export default function App() {
    const [modalIsVisible, setModalIsVisible] = useState(false);

    const toggleModal = () => {
        setModalIsVisible(!modalIsVisible);
    };

    return (
        {'Alert Dialog Popup Example'} toggleModal()}
                onConfirm={() => toggleModal()}
                onDismiss={() => toggleModal()}
            />
            
        
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 24,
        padding: 16,
    }
});

Conclusion

In this tutorial, we learned how we can use alert dialog or modal component in react native. Follow us for upcoming React Native articles.

• Bottom Sheet Dialog Fragment in Android
• Best React Native Development Tools
• Cardview in react native example
• How to Install and Setup React Native on Ubuntu
• Full Screen Dialog Fragment in Android

The post React Native Popup Modal Example appeared first on AndroidWave.