React Native Modal Popup Tutorial

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 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 ,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.