Overlays and system UI

These components coordinate with platform windows, keyboards, gestures and system chrome. Prefer them over emulating overlays with absolute-positioned views.

Keyboard and sheets

Chat composers above the keyboard, sheets that ride above their own keyboard, autoFocus inside sheets and engine-owned safe areas are covered in Keyboard, sheets and safe areas.

Modal

use Pam\Native\ModalAnimationType;
use Pam\Native\ModalPresentation;
use Pam\Native\UI\Modal;

$modal = Modal::make(
    $dialog,
    visible: $this->state->showDialog,
    presentation: ModalPresentation::Dialog,
)
    ->animationType(ModalAnimationType::Fade)
    ->backdropColor(0x99000000)
    ->hardwareAccelerated()
    ->onRequestClose(fn () => $this->state->showDialog = false)
    ->onDismiss(fn () => $this->afterDismiss());

Bottom Sheet

use Pam\Native\BottomSheetKeyboardBehavior;
use Pam\Native\UI\BottomSheet;

$sheet = BottomSheet::make(
    $filters,
    snapPoints: [0.35, 0.7, 1],
    index: 1,
)
    ->dismissible()
    ->backdropDismiss()
    ->handleVisible()
    ->dragEnabled()
    ->cornerRadius(24)
    ->keyboardBehavior(BottomSheetKeyboardBehavior::Interactive)
    ->onChange(fn ($event) => $this->state->sheetIndex = $event->index)
    ->onDismiss(fn () => $this->state->filtersOpen = false);

<BottomSheet
    :snapPoints="[0.35, 0.7, 1.0]"
    index="1"
    keyboardBehavior="interactive"
    on:sheetChange="sheetChanged"
    on:sheetDismiss="sheetDismissed"
>
    <Filters />
</BottomSheet>

Loading, status bar, and keyboard

use Pam\Native\ActivityIndicatorSize;
use Pam\Native\KeyboardAvoidingBehavior;
use Pam\Native\StatusBarAppearance;
use Pam\Native\UI\ActivityIndicator;
use Pam\Native\UI\KeyboardAvoidingView;
use Pam\Native\UI\StatusBar;

$loading = ActivityIndicator::make($this->state->loading)
    ->size(ActivityIndicatorSize::Large)
    ->color(0xFF2563EB)
    ->hidesWhenStopped();

$status = StatusBar::make(
    color: 0xFFF8FAFC,
    appearance: StatusBarAppearance::Dark,
)->animated();

$form = KeyboardAvoidingView::make(
    $fields,
    KeyboardAvoidingBehavior::Resize,
)->verticalOffset(12);

Templates may use either PAM’s color/appearance names or the familiar mobile aliases:

<StatusBar
    backgroundColor="#F8FAFC"
    barStyle="dark-content"
    animated="true"
    translucent="false"
/>

light-content selects light system icons; dark-content selects dark icons. The aliases compile to the same typed status-bar properties and are not passed through as inert view background styles. On Android, only the active retained stack route contributes status-bar configuration. Hidden screens cannot override the visible route when a stack is restored or when the user pushes, pops, replaces, or cancels an interactive back gesture.

On iOS (PAM Native 1.30.0+), barStyle, hidden and animated drive the status bar like React Native; backgroundColor and translucent are Android-only. Every active StatusBar (the visible route and any open or opening modal) joins one stack in mount order, the latest winning property by property, so a modal’s or pushed screen’s bar overrides the one below it and the previous bar returns when it closes or pops. PAM’s controllers report the result through preferredStatusBarStyle/prefersStatusBarHidden and call setNeedsStatusBarAppearanceUpdate() on each change (animated with animated="true"). Generated apps declare UIViewControllerBasedStatusBarAppearance YES; with NO, the application-level status bar is driven instead, as in React Native.

A Modal on Android draws its own window. Its status bar follows the StatusBar its content (or the screen) declares, and its navigation bar follows the app’s light/dark appearance like React Native’s Modal (1.30.0+): a navigationBarTranslucent (edge-to-edge) modal gets a transparent, system-scrimmed bar with icons for the app theme, a fitted modal the app’s window background, and navigationBarHidden hides it.

DrawerLayoutAndroid supports overlay, front, back and permanent/adaptive drawer presentations with open/close events. InputAccessoryView hosts native keyboard accessory content. Their names are retained for platform clarity; verify the target-specific behavior before depending on exact cross-platform appearance.