Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Modal props
2.1.
visible 
2.2.
animated
2.3.
animationType
2.4.
supportedOrientations
2.5.
onDissmis
2.6.
onRequestClose
2.7.
onShow
2.8.
transparent
2.9.
presentationStyle
2.10.
statusBarTranslucent
2.11.
hardwareAccelerated
3.
React native modal example
4.
Frequently Asked Questions
4.1.
What is Modal in React Native?
4.2.
List some modal props.
4.3.
What are the three different types of animationType?
4.4.
What is presentationStyle prop in react native modal?
5.
Conclusion
Last Updated: Mar 27, 2024

React Native working with modals

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we'll understand modals and their properties and work with examples in react native. Let's begin with the introduction of Modals.

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. The modal that appears above the screen covers the entire application area. Modal must be imported from the react-native library to use in our application.

In a modal, there are three different types of choices (slide, fade, and none) that determine how the modal appears inside the react native app. Now we have seen what a modal is? Let's look at the modal props. 

Also See, Hooks in React JS

Modal props

visible 

This prop determines the visibility of your modal.

Type Default
bool false

animated

This property has been retired. Instead, use the animationType prop.

animationType

It determines how the modal animates. There are three different types of animated props:

  • slide slides in the modal from the bottom,
  • fade fades into view,
  • none It makes modals appear without an animation.
Type Default
enum( ‘slide’, ‘fade’, ‘none’ ) none

supportedOrientations

supportedOrientations enables the modal to be rotated in any preset orientations (portrait, portrait-upside-down, landscape, landscape-left, landscape-right).

Type Default
array of enums(‘portrait’, ‘portrait-upside-down’, ‘landscape’, ‘landscape-left’, ‘landscape-right’)  [‘portrait’]

onDissmis

This prop specifies a function called after the modal is dismissed.

Type
function

onRequestClose

When the user taps the hardware back button on Android or the menu button on Apple TV, this callback prop is triggered.

Type
function

onShow

The onShow prop allows you to specify a function that function will execute after displaying the modal.

Type
function

transparent

The transparent prop controls whether or not your modal fills the entire display. The modal will appear on a transparent background if you set this to true.

Type Default
bool false

presentationStyle

It determines how a model appears on large devices. Possible values:

  • fullScreen covers the screen entirely.
  • pageSheet covers portrait-width view centered only on larger devices.
  • formSheet covers narrow-width view centered only on larger devices.
  • overFullScreen covers the screen entirely but allows transparency.
Type Default
enum(‘fullScreen’, ‘pageSheet’, ‘formSheet’, ‘overFullScreen’) fullScreen if transparent={false}
overFullScreen if transparent={true}

statusBarTranslucent

The statusBarTranslucent prop determines whether your modal should go under the system status bar.

Type Default
bool false

hardwareAccelerated

It determines whether the underlying window should be forced to use hardware acceleration.

Type Default
bool false

Since we have seen the modal props, let's look at an example of a pop-up modal.

Also see,  React Native Reanimated

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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;

Output:

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

Props Used in the above example:

Prop Value
animationType slide
transparent true
visible modalVisible (by default false, sets to true on clicking the show modal button)
onRequestClose function

 

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.

Previous article
React Native with Google Maps
Next article
React Native Paper
Live masterclass