Explain working of the Modal window in React Native

Modal component helps to display a content view above your UI content.
The basic modal component is as follows −
<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }}> Your Content Here</Modal>
To work with Modal component you need to import it first as follows −
import { Modal } from "react-native";
The basic properties of Modal Window is as follows −
To work with Modal component, you need to import it first as follows −
import { Modal } from "react-native";
To show a modal window, you can decide the animation you would like to have on it. The options are slide, fade and none. In the example below we want to display a simple modal window with text and button on it like shown below −
<Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() => {setModalVisiblility(false); }}/>
      </View>
   </View>
</Modal>
The isVisible variable is assigned to visible property. It is false by default i.e the modal window will not be shown by default. The isVisible property is initialised as shown below −
const [isVisible, setModalVisiblility] = useState(false);
The setModalVisiblility will update the isVisible variable from false to true and vice versa.
The Close button defined inside <Modal> component call the setModalVisiblility(false), this will make isVisible to false and the modal window will disappear.
To display the modal window there is button outside <modal> component that calls setModalVisiblility(true) as shown below −
<View style={styles.centeredView}>
   <Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
            </View>
         </View>
      </Modal>
      <Button title="Click Me" onPress={() => {
         setModalVisiblility(true);
      }}
   />
</View>
Here is the working code that shows/hide the modal window.
import React, { useState } from "react";
import { Button, Alert, Modal, StyleSheet, Text, View } from "react-native";
const App = () => {
   const [isVisible, setModalVisiblility] = useState(false);
   return (
      <View style={styles.centeredView}>
         <Modal
            animationType="slide"
            transparent={true}
            visible={isVisible}
         >
         <View style={styles.centeredView}>
            <View style={styles.myModal}>
               <Text style={styles.modalText}>Modal Window Testing!</Text>
                  <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
                  </View>
               </View>
            </Modal>
            <Button title="Click Me" onPress={() => {
               setModalVisiblility(true);
            }}
         />
      </View>
   );
};
const styles = StyleSheet.create({
   centeredView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      marginTop: 22
   },
   myModal: {
      width:200,
      height:200,
      margin: 20,
      backgroundColor: "white",
      borderRadius: 20,
      padding: 35,
      alignItems: "center",
      shadowColor: "#000",
      shadowOffset: {
         width: 0,
         height: 2
      },
      shadowOpacity: 0.30,
      shadowRadius: 4,
      elevation: 5
   },
   modalText: {
      marginBottom: 20,
      textAlign: "center"
   },
   modalButton: {
      marginBottom: 50,
   }
});
export default App;