modal in React Native?

What is a modal in React Native?

The React Native Modal is a type of View component used to present the content above an enclosing view. There are three options (slide, fade and none) available in a modal that decides how the Modal will show inside the react native app.

The goal of react-native-modal is to expand the original React Native< Modal> component by adding animations, style customization options, and new features while providing a simple API (Application Program Interface).

Features

  • Smooth enter/exit animations
  • Plain simple, and flexible APIs
  • Customizable backdrop opacity, colour and timing
  • Listeners for the modal animations ending
  • Resize itself correctly on device rotation
  • Swipeable
  • Scrollable

The React Native Modal is a type of View component used to present the content above an enclosing view. There are three options (slide, fade and none) available in a modal that decides how the Modal will show inside the react native app.

To use the Modal component in our application, we need to import Modal from the react-native library.

Modal Props

Props Description
visible This prop determines whether the Modal is visible.
supported orientations It allows for rotating the Modal in any specified orientations (Portrait, Landscape, etc.).
onRequestClose This is a callback prop when the user taps on the hardware back button on Android or the menu button on Apple TV.
slide: It slides the Modal from the bottom.
Fade: It fades into the view.
None: It appears the model appears without any animation.
onShow This allows passing a function that will show when the Modal is once visible.
transparent It determines whether the Modal will cover the entire view, and setting it to "true" renders the Modal over the transparent background.
animationType It controls how the Modal animates. There are three types of animated props available:
slide: It slides the Modal from the bottom.
Fade: It fades into the view.
None: It appears the model appears without any animation.
hardwareAccelerated It controls the appearance of a model (fullScreen, pageSheet, fromSheet, overFullIt controls whether to force hardware acceleration for the underlying window.
onDismiss This prop passes a function that will be called once the Modal has been dismissed.
onOrientationChange This props is called when the orientation changes while the Modal is displayed. The type of orientation is "portrait" or "landscape".
presentationStyle It controls the appearance of a model (fullScreen, pageSheet, fromSheet, overFullScreen) generally on significant devices.
animated This prop is deprecated. Use the animated type prop instead, which is discussed above.