In this tutorial we will learn how to show Modal in React Native applications for Android and IOS. Generally Modal displays above the current screen and blocks the screen.
What Is A Modal In React Native?
Modal is a component that is a basic way to present content above a enclosing view. Further we will learn how to display a Modal using Functional component and Class component. Modal is a dialog box which appears when we click on Button or any clickable area. Generally we show the Model on button click.
Modal Example In Function Component In React Native
Below is the example of Modal in Function Component in React Native. You can copy the below code and paste in your project where you wan to use it.
import React, { Component, useState } from "react";
import { View, StyleSheet, Image, Text, Pressable, Modal, } from "react-native";
const Home = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.mainView}>
<Text style={{ color: 'black', fontSize: 20, fontWeight: "bold" }}>This is react native Modal Example</Text>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.mainView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Modal Is Shown Now You can close it </Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>Close Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<Pressable
onPress={() => setModalVisible(true)}
>
<Text style={{ color: 'white', fontSize: 20, fontWeight: "bold", backgroundColor: 'blue', padding: 10 }}>Show The Model</Text>
</Pressable>
</View>
);
}
export default Home;
const styles = StyleSheet.create({
mainView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 26
},
modalView: {
margin: 25,
backgroundColor: "green",
borderRadius: 25,
padding: 40,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
modalText: {
marginBottom: 25,
fontSize: 18,
textAlign: "center",
color: "white"
},
buttonOpen: {
backgroundColor: "#F194FF",
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
textStyle: {
color: "black",
fontSize: 18,
fontWeight: "bold",
textAlign: "center",
padding: 10,
},
buttonClose: {
backgroundColor: "#2196F3",
},
})
Class Component Example
The below code present the Modal example in Class Component. There is no changes compare to the Functional Component only the way changes of creating of class component.
import React, { Component, } from 'react';
import { View, StyleSheet, Image, Text, Pressable, Modal, } from "react-native";
export default class TestClass extends Component {
state = {
modalVisible: false,
};
setModalVisible = (visible) => {
this.setState({
modalVisible: visible,
})
}
render() {
const { modalVisible} = this.state;
return (
<View style={styles.mainView}>
<Text style={{ color: 'black', fontSize: 20, fontWeight: "bold" }}>Modal In Class Component</Text>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal closed.");
this.setModalVisible(!modalVisible);
}}
>
<View style={styles.mainView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Modal Is Shown Now You can close it </Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => this.setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>Close Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<Pressable
onPress={() => this.setModalVisible(true)}
>
<Text style={{ color: 'white', fontSize: 20, fontWeight: "bold", backgroundColor: 'blue', padding: 10 }}>Show The Model</Text>
</Pressable>
</View>
);
}
}
const styles = StyleSheet.create({
mainView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 26
},
modalView: {
margin: 25,
backgroundColor: "green",
borderRadius: 25,
padding: 40,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
modalText: {
marginBottom: 25,
fontSize: 18,
textAlign: "center",
color: "white"
},
buttonOpen: {
backgroundColor: "#F194FF",
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2
},
textStyle: {
color: "black",
fontSize: 18,
fontWeight: "bold",
textAlign: "center",
padding: 10,
},
buttonClose: {
backgroundColor: "#2196F3",
},
})Props
By using Props we can create more effective components. There are some props, those are as below
animationType : The animationType controls how the Modal animates. Possible values are :
- slide – slides in from the bottom,
- fade – fades into view,
- none – appears without an animation.
Result
Generally Modals are used to display dialog box which appears on click of any button, text or any clickable area.
If You click on the button “Show The Modal” text the below result will be displayed. The Modal is supported in both Android and IOS devices.
You can learn more about this from the React Native website from Here. There are some other useful contents for this component at there.
Thank you for visiting this tutorial on FlutterTpoint. Please visit more React Native Tutorials. For any query and doubt you can comment in the comment section below, We will solve your issues as soon as possible. We recommend you to learn React Native Elements.