ModalView

import { ModalView } from "react-native-multiple-modals";

Props

animationType

Controls how the modal animates.

• slide slides in from the bottom
• fade fades into view
• none appears without an animation

Type	Default
enum('none', 'fade', 'slide')	'none'

backdropColor

The color of the default backdrop.

Type	Default
color	'rgba(0, 0, 0, 0.3)'

BackdropPressableComponent

The component which wraps renderBackdrop. Use it to overwrite default props or make backdrop untouchable, for example with react-native-gesture-handler's Pressable.

Type	Default
component	Pressable

children

The content of the modal.

Type
React Node Required

contentContainerStyle

Styles of the content wrapper. Use it for aligning your content view.

Type
View Style

disableDefaultStatusBarIOS iOS No Web

Allows to disable inner StatusBar component in case you are using expo-status-bar.

Note that it is only applicable for iOS because there status bar is shared between all modal windows. On the other hand on android status bar is tightly coupled to the individual modal window and couldn't be controlled through the StatusBar component.

Type	Default
bool	false

onRequestDismiss

Called when the backdrop or the back button is pressed. Receives a single calledBy argument telling which one, see DismissalSource. On Web, the Escape key counts as the back button.

tip

If you want the modal to block the interface and not close when user taps the backdrop or back button, just don't pass this function. The modal will be rendered until you remove it from the React tree.

Type
function

renderBackdrop

Use it to render custom backdrop, for example <BlurView />. Must return a React Node.

Type
function

showBackdrop

Whether to render the backdrop behind the modal.

Type	Default
bool	true

statusBar Android iOS No Web

Controls the status bar of the modal window.

• Android supports only translucent and barStyle
• iOS supports all props

Type
StatusBar props

statusBarTranslucent Android No Web Deprecated

Determines whether your modal should go under the system status bar. Use statusBar.translucent instead.

Type	Default
bool	false

Type definitions

DismissalSource

Passed to onRequestDismiss. Exported from the package.

enum DismissalSource {
  BackButton = "BackButton",
  Backdrop = "Backdrop",
}

ModalViewProps

The props type of ModalView, exported for typing your own wrappers.

import type { ModalViewProps } from "react-native-multiple-modals";