Popover | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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 floats around a trigger. It is a non-modal dialog used to provide contextual information to the user. It should be paired with a pressable trigger element.
Show Code
Playground
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 controlling 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: RefObject<any>
finalFocusRef
The ref of element to receive focus when the modal closes.
Type: RefObject<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
useRNModal
Type: boolean
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