Skip to content

Portal Primitive

Portals let you render its children into a different part of your app.

Features

  • Defaults to a single host
  • Supports multiple hosts
  • Supports multiple portals for a single host

Installation

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/portal

Usage

Default Portal

Add the <PortalHost /> as the last child of your <Root/> component (for expo-router, the default export in the root _layout.tsx)

import { PortalHost } from '@rn-primitives/portal';
function Root() {
return (
<>
<Stack />
{/* Children of <Portal /> will render here */}
<PortalHost />
</>
);
}

Then, from any component, add a <Portal /> and its content will be rendered as a child of <PortalHost />

import { Portal } from '@rn-primitives/portal';
function Card() {
return (
<Wrapper>
<Content />
{/* Children of `Portal` will be rendered as a child of `PortalHost` */}
{/* It will not render in the `Card` component */}
<Portal name='card-portal'>
<View
style={[
StyleSheet.absoluteFill,
{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
]}
>
<View>
<Text style={{ color: 'white' }}>
I am centered and overlay the entier screen
</Text>
</View>
</View>
</Portal>
</Wrapper>
);
}

Custom Portal Host

Add the <PortalHost name="unique-host-name"/> with a unique name where you want the contents of <Portal /> to render. Then, from any component, add a <Portal /> and its content will be rendered as a child of <PortalHost />

import { Portal, PortalHost } from '@rn-primitives/portal';
function Example() {
return (
<Wrapper>
<PortalHost name='example-host' />
<Content />
<Portal name='example-portal' hostName='example-host'>
<View>
<Text>I will be rendered above the Content component</Text>
</View>
</Portal>
</Wrapper>
);
}

Props

PortalHost

By default, children of all Portal components will be rendered as its own children.

PropTypeNote
namestringProvide when it is used as a custom host (optional)

Portal

PropTypeNote
name*stringUnique value otherwise the portal with the same name will replace the original portal
hostNamestringProvide when its children are to be rendered in a custom host (optional)