Learn how to use the Portal component in React and React Native to render content outside the DOM hierarchy. Explore installation, API reference, and props. This is an illustration of Portal component.

Important Note

Note: The portal component renders its children outside the parent component's DOM hierarchy. However, it is important to note that the portal component is created using React context. This means that the portal component will not work if the parent component is not wrapped in a

GluestackUIProvider

OverlayProvider

Installation

Run the following command:

npx gluestack-ui add portal

API Reference

To use this component in your project, include the following import statement in your file.

import { Portal } from '@/components/ui/portal';

export default () => <Portal />;

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Portal

Prop	Type	Default	Description
isOpen	boolean	-	If true, the portal will open.
isKeyboardDismissable	boolean	-	If true, the keyboard can dismiss the portal.
useRNModal	boolean	false	If true, renders react-native native modal.
useRNModalOnAndroid	boolean	false	If true, renders react-native native modal only in android.
onRequestClose	((event: NativeSyntheticEvent<any>) => void) \| undefined	-	Callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. This is required on Apple TV and Android. Only applicable when useRNModal is true.
animationPreset	"fade" \| "slide" \| "none"	"fade"	The animation preset for the portal.

Important Note

Note: The portal component can be used to create a modal, popover, menu, tooltip, or any other component that needs to be rendered outside the parent component's DOM hierarchy. However, We recommend using our components like

Modal

Popover

Tooltip

for these use cases since they handle all the accessibility.

Edit this page on GitHub