↗
↗
↗
↗
☰
PortalHost
iOS
Android
Web
The root host layer that receives Portal content. Mount it once near the top of your app so overlays, dropdowns, and toasts can escape local clipping.
Import
tsx
Copy
import
{
PortalHost
}
from
'react-native-cross-elements'
;
Preview
Preview
Code
root-layout.tsx
PortalHost mounted at the app root
Portals render into this top-level layer.
Root setup
tsx
Copy
import
{
PortalHost
}
from
'react-native-cross-elements'
;
export
default
function
RootLayout
(
{
children
}
)
{
return
(
<
>
<
PortalHost
/
>
{
children
}
<
/
>
)
;
}
Named hosts
tsx
Copy
<
PortalHost
name
=
"top_layer"
/
>
<
Portal
portalName
=
"top_layer"
>
<
Toast
/
>
<
/
Portal
>
Pointer events
⚠️
PortalHost keeps the host layer transparent to pointer events. Add pointerEvents="auto" to interactive portal content.
Props
Prop
Type
Default
Description
name
string
'root_ui_portal'
Host name targeted by Portal.