Modal

<modal> presents content over everything else, as ModalHostView.

@if (showSettings()) {
<modal (requestClose)="showSettings.set(false)">
  <text>Settings</text>
</modal>
}

Showing and hiding

[visible] (default true) shows and hides a modal that stays in the template:

<modal [visible]="showSettings()" (requestClose)="showSettings.set(false)">
  <text>Settings</text>
</modal>

While visible is false the native host is not in the tree at all, as React Native's own Modal renders nothing while hidden, so the screen underneath takes touches as usual. On iOS a modal that was showing leaves once its dismissal has finished animating, which is also when (dismiss) fires; on Android it leaves straight away. @if does the same for a modal whose content should not exist while hidden, and destroys that content with it. Under @ng-native/testing the fake reports the dismissal as iOS does, so a modal a test closes has left the tree once the interaction resolves.

Transparency

transparent (default false) shows through to the screen behind the modal, and the container gets no backdrop; backdropColor sets the container's background otherwise, defaulting to white. On iOS, a transparent modal presents as presentationStyle="overFullScreen" unless you set another, since that is the only style that actually looks transparent - setting a different presentation style while transparent logs a warning rather than failing silently. presentationStyle otherwise chooses 'fullScreen', 'pageSheet' or 'formSheet' on iOS.

Other props

animationType ('none', 'slide', 'fade') controls how the modal appears and leaves. supportedOrientations lists which orientations the modal may rotate to on iOS (defaults to portrait), and allowSwipeDismissal lets a downward swipe dismiss it there, reported through (requestClose). On Android, statusBarTranslucent draws under the status bar and navigationBarTranslucent under the navigation bar, but under Android edge-to-edge React Native turns both on whatever you set. In an app that opts out of edge-to-edge, navigationBarTranslucent has an effect only with statusBarTranslucent. hardwareAccelerated gives the modal's window a hardware-accelerated surface.

On Android a modal is a window of its own, drawn under both the status bar and the navigation bar. On iOS a full-screen modal reaches the notch and the home indicator. Either way it is outside the app's view tree, so the root <safe-area-provider> does not reach it. Give its content a provider of its own, with [reportInsets]="false" so the app-wide SafeArea keeps the app's insets, and a <safe-area-view> inside it:

<modal (requestClose)="showSettings.set(false)">
  <safe-area-provider [reportInsets]="false" class="fill">
    <safe-area-view class="fill" [edges]="['top', 'bottom']">
      <text>Settings</text>
    </safe-area-view>
  </safe-area-provider>
</modal>

.fill is flex: 1. SafeAreaProvider and SafeAreaView come from @ng-native/components.

Events

(requestClose) fires for the Android back button or an iOS swipe-to-dismiss. (show), (dismiss) and (orientationChange) are the others.

modalcomponent@ng-native/components

import { Modal } from '@ng-native/components';and add Modal to the component's imports

Content presented over everything else. Commits as ModalHostView .

Inputs

visible

boolean = true

Whether the modal is showing. Defaults to true, as in RN. While false the engine leaves the native host out of the commit, as RN's Modal returns null when hidden, because the host covers the screen and takes every touch whether or not it presents; on iOS a modal that was showing stays until native reports its dismissal.

transparent

boolean = false

See through to the screen behind; the container gets no backdrop.

backdropColor

string

The container's background when not transparent. Defaults to white.

animationType

'none' | 'slide' | 'fade'

How the modal appears and leaves. Defaults to none .

presentationStyle

ModalPresentationStyle

iOS: full screen, a sheet, or over the current content. overFullScreen if transparent.

supportedOrientations

readonly ModalOrientation[]

iOS: which orientations the modal may rotate to. Defaults to portrait.

allowSwipeDismissal

unknown

iOS: let a downward swipe dismiss the modal, reported through (requestClose) .

statusBarTranslucent

unknown

Android: draw under the status bar. Always on under Android edge-to-edge (Expo SDK 57), where React Native ignores false .

navigationBarTranslucent

unknown

Android: draw under the navigation bar. Always on under Android edge-to-edge (Expo SDK 57), where React Native ignores false . In an app that opts out, it needs statusBarTranslucent .

hardwareAccelerated

unknown

Android: give the modal's window a hardware-accelerated surface.

Showing and hiding

Transparency

Other props

Safe area in a modal

Events

Inputs