Explaining how modal windows work in React Native

Modal components help to display content views above UI content.

The basic modal components are as follows-

 { Alert.alert("Modal has been closed."); }}> Your Content Here

To use the modal component, you need to import it first, as shown below-

import { Modal } from "react-native";

The basic properties of the modal window are as follows-

Example 1: Show modal window display

To use a modal component, you need to import it first as shown below -

import { Modal } from "react-native";

To display a modal window, you can decide the animation to be displayed on it. Options are Slide, Fade, and None. In the following example, we want to display a simple modal window with text and buttons as shown below -

   
      
         Modal Window Testing!
             {setModalVisiblility(false); }}/>
      
   

isVisible variable is assigned to the visible property. Defaults to false, i.e. modal windows will not be shown by default. The isVisible property is initialized as follows -

const [isVisible, setModalVisiblility] = useState(false);

setModalVisiblility will update the isVisible variable from false to true and vice versa.

The close button defined in the component calls setModalVisiblility(false), which will make isVisible false and the modal window will disappear.

To show a modal window, have a button outside the component calling setModalVisiblility(true) as shown below -

   
   
      
         Modal Window Testing!
            {setModalVisiblility(false); }}/>
            
         
      
       {
         setModalVisiblility(true);
      }}
   />

This is the working code to show/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 (
      
         
         
            
               Modal Window Testing!
                  {setModalVisiblility(false); }}/>
                  
               
            
             {
               setModalVisiblility(true);
            }}
         />
      
   );
};
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;

Output

The above is the detailed content of Explaining how modal windows work in React Native. For more information, please follow other related articles on the PHP Chinese website!