Version: 3.0.6

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.
import { Popover } from 'native-base';

Examples#

Basic#

initialFocusRef#

Positions#

Tip

You can pass custom backgroundColor using bg or backgroundColor, borderColor and borderWidth to Popover.Content.

Props#

Name Type Description Default
defaultIsOpen boolean If true, the popover will be opened by default -
isOpen boolean Whether the popover is opened. Useful for conrolling the open state -
trapFocus boolean Whether popover should trap focus. true
shouldFlip boolean 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. true
initialFocusRef any The ref of element to receive focus when the popover opens. -
finalFocusRef any The ref of element to receive focus when the modal closes. -
trigger (_props: any, state: { open: boolean; }) => Element Function that returns a React Element. This element will be used as a Trigger for the popover -
crossOffset number The additional offset applied along the cross axis between the element and its trigger element. -
offset number The additional offset applied along the main axis between the element and its trigger element. -
shouldOverlapWithTrigger boolean Determines whether menu content should overlap with the trigger false
children ReactNode Popover children -
isKeyboardDismissable boolean If true, the modal will close when Escape key is pressed true
placement "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom" Popover placement bottom
onClose () => void 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. -
onOpen () => void This function will be invoked when popover is opened -

Popover.Arrow#

Popover.Arrow composes the Box component.

Popover.Content#

Popover.Content composes the Box component.

Popover.Header#

Popover.Header composes the Box component.

Popover.Footer#

Popover.Footer composes the Box component.

Popover.Body#

Popover.Body composes the Box component.

Popover.CloseButton #

Popover.CloseButton composes the Button component.

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of popover
We can easily extend the popover component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Popover: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

Accessibility#

Adheres to the Dialog WAI-ARIA design pattern.

Keyboard Interactions#

NameDescription
SpaceOpens/closes the popover.
EnterOpens/closes the popover.
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EscCloses the popover and moves focus to Popover.Trigger.