Version: 3.0.0-next.36

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.Trigger: Used to wrap the reference (or trigger) element.
  • Popover.Content: The popover itself.
  • Popover.Header: The header of the popover.
  • Popover.Body: The body of the popover.
  • Popover.CloseButton: A button to close the popover.
import { Popover } from 'native-base';

Examples#

Basic#

Size#

initialFocusRef and closeOnBlur#

Tip

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

Props#

NameTypeDescriptionDefault
onOpenfunctionCallback fired when the popover opens.-
onClosefunctionCallback fired when the popover closes.-
initialFocusRefReact.RefThe ref of the element that should receive focus when the popover opens.-
finalFocusRefReact.RefThe ref of the element that should receive focus when the popover closes.-
closeOnBlurbooleanIf true, the popover will close when you blur it out by pressing outside.-
idstringThe top-level id to use for the Popover and it's sub-components.-
sizexs, sm,md,lg,xl,full, number, stringSize of the Popover 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Ā CloseButtonĀ component.