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><Buttonsize="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
CLI
Manual
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.