Presentation components

React controls all presentation state. Native dismissal reports false through onChange.

Sheet

<Sheet value={open} onChange={setOpen}>
  <VStack spacing={12} padding={20}>
    <Text font="headline">New item</Text>
    <Button onPress={() => setOpen(false)}>Done</Button>
  </VStack>
</Sheet>

Children materialize even while the sheet is closed. Gate expensive content with {open && <Content />} when necessary.

Both hosts use native popup presentation for sheets. Popup content is outside the host-rendered window screenshot surface.

Alert

Alerts are data-driven rather than child-based:

<Alert
  value={confirming}
  title="Delete item?"
  message="This cannot be undone."
  buttons={[
    { id: 'cancel', label: 'Cancel', role: 'cancel' },
    { id: 'delete', label: 'Delete', role: 'destructive' },
  ]}
  onSelect={handleAlertButton}
  onChange={setConfirming}
/>

Button selection fires before the dismissal change. The host preserves all button specs. A cancel-role button handles the platform cancel action, and destructive actions receive critical styling.

Popover and PopoverContent

Ordinary Popover children form the anchor. A single PopoverContent child forms the presented body.

<Popover value={open} arrowEdge="bottom" onChange={setOpen}>
  <Button onPress={() => setOpen(true)}>Help</Button>
  <PopoverContent padding={12}>
    <Text>This is native UI.</Text>
  </PopoverContent>
</Popover>

Open sheets, alerts, popovers, and menus use popup layers on Windows and stay outside RenderTargetBitmap screenshots.