Hi dev,
Today, I will learn you how to create modal popup in react native. You can easily create modal in react native. First i will import namespace Modal, after I will make modal using modalVisible method in react native.
Here, I will give you full example for simply display modal using react native as bellow.
Step 1 - Create projectIn the first step Run the following command for create project.
expo init ModalStep 2 - App.js
In this step, You will open App.js file and put the code.
import React, { Component } from "react";
import { Alert,Modal,StyleSheet,Text,TouchableHighlight,View ,Header } from "react-native";
class App extends Component {
state = {
modalVisible: false
};
setModalVisible = (visible) => {
this.setState({ modalVisible: visible });
}
render() {
const { modalVisible } = this.state;
return (
<View style={styles.view}>
<Text style={styles.header}>React Native Modal Popup Example itwebtuts.com</Text>
<Modal
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.view}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hii Friends!</Text>
<TouchableHighlight
style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
onPress={() => {
this.setModalVisible(!modalVisible);
}}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
style={styles.openButton}
onPress={() => {
this.setModalVisible(true);
}}
>
<Text style={styles.textStyle}>Show Modal</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
view: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 0
},
modalView: {
margin: 30,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
},
openButton: {
backgroundColor: "#115454",
borderRadius: 5,
padding: 15,
elevation: 2
},
textStyle: {
color: "white",
textAlign: "center",
},
modalText: {
marginBottom: 15,
},
header:{
textAlign: 'center',
fontSize: 20,
marginBottom: 50,
}
});
export default App;
Step 3 - Run project
In the last step run your project using bellow command.
npm startIt will help you..
