React Native Modal Popup Example Tutorial

React Native

Nicesnippets

3645

15-07-2020


React Native Modal Popup Example Tutorial

Hi Guys,

In this blog, I will explain 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 project

In the first step Run the following command for create project.

expo init Modal

Step 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 } 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}>

<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 World!</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: 22

},

modalView: {

margin: 20,

backgroundColor: "white",

borderRadius: 20,

padding: 35,

alignItems: "center",

shadowColor: "#000",

shadowOffset: {

width: 0,

height: 2

},

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,

}

});

export default App;

Step 3 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...