Skip to main content

Status bar and edge-to-edge

Each ModalView owns a native window, so the status bar is configured per modal through the statusBar prop rather than through a global StatusBar component.

Status bar​

<ModalView statusBar={{ translucent: true, barStyle: "light-content" }}>
  {children}
</ModalView>
  • iOS supports every StatusBar prop.
  • Android supports only translucent and barStyle.
  • Web ignores the prop.

Using expo-status-bar on iOS​

On iOS the status bar is shared between all windows, so the StatusBar that ModalView renders internally competes with expo-status-bar. Pass disableDefaultStatusBarIOS to leave the status bar to your own component. On Android the status bar belongs to the modal window, so there is nothing to disable.

Edge-to-edge​

A full-screen modal whose backdrop covers the system bars while the content stays inside the safe area:

import { SafeAreaView } from "react-native-safe-area-context";
import { ModalView } from "react-native-multiple-modals";

<ModalView
  backdropColor="#0d47a1"
  statusBar={{ translucent: true, barStyle: "light-content" }}
  contentContainerStyle={{ flex: 1 }}
  onRequestDismiss={onClose}
>
  <SafeAreaView style={{ flex: 1 }}>{children}</SafeAreaView>
</ModalView>;

translucent: true lets the modal window draw under the status bar, the backdrop color fills the whole screen, and SafeAreaView pads the content back inside the safe area.

Full source: EdgeToEdgeModal.tsx.