Popover | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
Popover
Popover floats around a trigger. It is a non-modal dialog and 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
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. Checkout the default theme of 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