Explain working of the Modal window in React Native

React NativeJavascriptMobile Development

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 −

Sr.NoProps & Description
1animationType
This property handles the animation for displaying the modal window.It is an enum with three values − slide, fade and none.
2onDismiss
This property takes in a function that will get called when the modal window is dismissed.
3onOrientationChange
Callback function that is called when the device orientation is changed when the modal window is displayed.
4onShow
Function is passed as the prop value that is called when the modal window is shown.
5presentationStyle
This property handles the display of the modal window. The values available are fullScreen, pageSheet, formSheet and overFullScreen.
6transparent
This prop will decide to give a transparent view or fill the entire view for the modal window.
7visibile
This property will decide if your modal window is visible or not.

Example 1: Showing Modal Window Display

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;

Output

raja
Published on 01-Jul-2021 08:02:48
Advertisements