Popover | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Popover
Popover is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a pressable trigger element.
Import
Popover: The wrapper that provides props, state, and context to its children.
Popover.Arrow: The popover arrow.
Popover.Body: The body of the popover.
Popover.Content: The popover itself.
Popover.CloseButton: A button to close the popover.
Popover.Header: The header of the popover.
Popover.Trigger: Used to wrap the reference (or trigger) element.
Copy
import { Popover } from 'native-base';
Examples
Basic
Playground
initialFocusRef
Playground
Positions
Playground
Tip: You can pass custom backgroundColor using bg or backgroundColor, borderColor and borderWidth to Popover.Content.
Props
defaultIsOpen
If true, the popover will be opened by default
Type: boolean
isOpen
Whether the popover is opened. Useful for conrolling the open state
Type: boolean
trapFocus
Whether popover should trap focus.
Type: boolean
Default: true
shouldFlip
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
Type: boolean
Default: true
initialFocusRef
The ref of element to receive focus when the popover opens.
Type: any
finalFocusRef
The ref of element to receive focus when the modal closes.
Type: any
trigger
Function that returns a React Element. This element will be used as a Trigger for the popover
Type: (_props: any, state: { open: boolean; }) => Element
crossOffset
The additional offset applied along the cross axis between the element and its trigger element.
Type: number
offset
The additional offset applied along the main axis between the element and its trigger element.
Type: number
shouldOverlapWithTrigger
Determines whether menu content should overlap with the trigger
Type: boolean
Default: false
children
Popover children
Type: ReactNode
isKeyboardDismissable
If true, the modal will close when Escape key is pressed
Type: boolean
Default: true
placement
Popover placement
Type: "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"
Default: bottom
onClose
This function will be invoked when popover is closed. It'll also be called when user attempts to close the popover via Escape key or backdrop press.
Type: () => void
onOpen
This function will be invoked when popover is opened
Type: () => void
Popover.Arrow
Popover.Arrow composes the  component.
Popover.Content
Popover.Content composes the  component.
Popover.Header
Popover.Header composes the component.
Popover.Footer
Popover.Footer composes the component.
Popover.Body
Popover.Body composes the  component.
Popover.CloseButton 
Popover.CloseButton composes the  component.
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the popover.
Info: We can easily extend the popover component theme using extendTheme function as described in the documentation .
Accessibility
Keyboard Interactions
Name
Description
Space
Opens/closes the popover.
Enter
Opens/closes the popover.
Tab
Moves focus to the next focusable element.
Shift + Tab
Moves focus to the previous focusable element.
Esc
Closes the popover and moves focus to Popover.Trigger.
Nativebase logo
MadeWithNativeBase