Portal
Render overlays above the rest of the tree — toasts, dialogs, scrims
npx rootnative add portal
Portals render their children into a host higher in the tree, so overlays escape parent overflow and stacking contexts. Wrap your app in PortalHost once, then use Portal anywhere.
Toast
Anchored to the bottom of the host.
Modal dialog
Renders a full-screen scrim with a centered dialog.
Stacking order
PORTAL_LAYERS defines the z-order contract: sheet (100) < dialog (200) < snackbar (300) < menu (400) < tooltip (500). Priority beats mount order.
Named host
A Portal with hostName renders into the matching named host instead of the root overlay — useful for scoping overlays to one screen or nested navigator.
<PortalHost name="scoped" />
Why a Portal?
Constrained parent
This box clips overflow and has a stacking context, but a Portal child still renders above the whole screen.