Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
| Sr.No | Props & Description |
|---|---|
| 1 | animationType This property handles the animation for displaying the modal window.It is an enum with three values − slide, fade and none. |
| 2 | onDismiss This property takes in a function that will get called when the modal window is dismissed. |
| 3 | onOrientationChange Callback function that is called when the device orientation is changed when the modal window is displayed. |
| 4 | onShow Function is passed as the prop value that is called when the modal window is shown. |
| 5 | presentationStyle This property handles the display of the modal window. The values available are fullScreen, pageSheet, formSheet and overFullScreen. |
| 6 | transparent This prop will decide to give a transparent view or fill the entire view for the modal window. |
| 7 | visibile 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
232 Views
