Modal

A basic way to present content above an enclosing view. Modals may be nested within other Modals.

import { Modal } from 'react-native';

<Modal {...props}>{children}</Modal>;

API

Props

animationType ?("fade" | "none" | "slide")

Default is "none". This can be used to add an animation to the modal being opened or closed.

children ?any

The children of a Modal element will be hidden or shown depending on the modal visibility.

onDismiss ?() => void

Called after the modal has been dismissed and is no longer visible.

onRequestClose ?() => void

Called when the user is attempting to close the modal like when they hit Escape. Only the top-most Modal responds to hitting Escape.

onShow ?() => void

Called after the modal has been shown and may be visible.

transparent ?boolean = false

Determines if the modal is rendered with a transparent backdrop or a white backdrop

visible ?boolean = true

Determines if the modal and its content is rendered.


Examples

  For TV Examples: LRUD navigation is already enabled in this sandbox. Use your keyboard arrow keys to move focus.

Updated
React Native Web for TVPortions Copyright © Nicolas Gallagher, Meta Platforms, Inc., Facebook, Inc. and affiliates, and other contributors as noted in file headers and THIRD_PARTY_NOTICES.md. Modifications and TV extensions Copyright © Harpreet Singh and contributors.