React Native working with modals

React native modal example

Given below is code of React Native to demonstrate, how modal works:

import React, { useState } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);//state of modal, default false 
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text> /*Button will change state to true*/  
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    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: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});
export default App;

You can also try this code with Online Javascript Compiler

Run Code

Output:

pressable Show Modal button	Pop-up screen appears on clicking Show Modal Button

Props Used in the above example:

Frequently Asked Questions

What is Modal in React Native?

A Modal component is usually used to provide content above an enclosing view. A Modal is a pre-defined component in React Native that aids in creating modal pop-ups. Modal must be imported from the react-native library to use in our application.

List some modal props.

Visible, animated, animationType, supportedOrientation, onDissmis, onShow, transparent, onRequestClose, presentationStyle, hardwareAccelerated are some of the Modal props.

What are the three different types of animationType?

Three types of animationType modal prop are Slide, Fade, and None. 

What is presentationStyle prop in react native modal?

It determines how a model appears on large devices such as iPad or plus-sized iPhones. The possible values are ‘fullScreen’, ‘pageSheet’, ‘formSheet’, and ‘overFullScreen’.

Conclusion

In this blog, we've learned what modals are, different modal props, and how they work. We then created a custom modal as an example that can improve any React Native application.

To know more about React Native check out, Why Choose React Native for Mobile App Development?. Also, check out react native modals for more information about Modals.