Home
Components
Hooks
Apps
Guides

Portal

A portal component renders its children outside the parent component's DOM hierarchy.
Installation
API Reference
Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.
This is an illustration of Pressable component.
function App() {
  const [visible, setVisible] = React.useState(false)
  const handleClose = () => setVisible(false)
  return (
    <>
      <Portal isOpen={visible} className="justify-center items-center">
        <HStack className="border-2 w-1/3 py-10 gap-4 rounded-lg flex-row justify-center items-center bg-background-0">
          <Text className="text-typography-950">Portal Content</Text>
          <Button
            size="xs"
            className="h-6 px-1 absolute top-2 right-2"
            variant="outline"
            onPress={handleClose}
          >
            <ButtonIcon as={CloseIcon} />
          </Button>
        </HStack>
      </Portal>
      <Button onPress={() => setVisible(!visible)}>
        <ButtonText>Toggle Portal</ButtonText>
      </Button>
    </>
  )
}

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 or 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 or 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, Menu, Tooltip for these use cases since they handle all the accessibility.