Popover | NativeBase

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
function Example() {
  return <Popover trigger={triggerProps => {
    return <Button {...triggerProps}>Trigger</Button>;
  }}>
      <Popover.Content accessibilityLabel="hello world" borderRadius={"xl"}>
        <Popover.Arrow />
        <Popover.CloseButton />
        <Popover.Header>Confirmation</Popover.Header>
        <Popover.Body>
          Are you sure you want to continue with your action?
        </Popover.Body>
        <Popover.Footer justifyContent="flex-end">
          <Button.Group>
            <Button size="sm" variant="ghost">
              Cancel
            </Button>
            <Button size="sm">Apply</Button>
          </Button.Group>
        </Popover.Footer>
      </Popover.Content>
    </Popover>;
}function Example() {
  return <Popover trigger={triggerProps => {
    return <Button {...triggerProps}>Trigger</Button>;
  }}>
      <Popover.Content accessibilityLabel="hello world" borderRadius={"xl"}>
        <Popover.Arrow />
        <Popover.CloseButton />
        <Popover.Header>Confirmation</Popover.Header>
        <Popover.Body>
          Are you sure you want to continue with your action?
        </Popover.Body>
        <Popover.Footer justifyContent="flex-end">
          <Button.Group>
            <Button size="sm" variant="ghost">
              Cancel
            </Button>
            <Button size="sm">Apply</Button>
          </Button.Group>
        </Popover.Footer>
      </Popover.Content>
    </Popover>;
}

initialFocusRef


Playground
function Example() {
  const initialFocusRef = React.useRef(null);
  return <Popover initialFocusRef={initialFocusRef} trigger={triggerProps => {
    return <Button {...triggerProps}>Trigger</Button>;
  }}>
      <Popover.Content width={250}>
        <Popover.Arrow />
        <Popover.CloseButton />
        {
        /* @ts-ignore */
      }
        <Popover.Header fontSize={20} fontWeight={700}>
          Header
        </Popover.Header>
        <Popover.Body>
          <Input mb={3} backgroundColor="white" ref={initialFocusRef} placeholder="I will get focused on Popover opening" />
          This Popover won't close on clicking outside the popover area.
        </Popover.Body>
        <Popover.Footer>This is the footer</Popover.Footer>
      </Popover.Content>
    </Popover>;
}function Example() {
  const initialFocusRef = React.useRef(null);
  return <Popover initialFocusRef={initialFocusRef} trigger={triggerProps => {
    return <Button {...triggerProps}>Trigger</Button>;
  }}>
      <Popover.Content width={250}>
        <Popover.Arrow />
        <Popover.CloseButton />
        {
        /* @ts-ignore */
      }
        <Popover.Header fontSize={20} fontWeight={700}>
          Header
        </Popover.Header>
        <Popover.Body>
          <Input mb={3} backgroundColor="white" ref={initialFocusRef} placeholder="I will get focused on Popover opening" />
          This Popover won't close on clicking outside the popover area.
        </Popover.Body>
        <Popover.Footer>This is the footer</Popover.Footer>
      </Popover.Content>
    </Popover>;
}

Positions


Playground
function Example() {
  const [position, setPosition] = useState("auto");
  return <VStack space={6} alignSelf="flex-start" w="100%">
      <Popover // @ts-ignore
    placement={position == "auto" ? undefined : position} trigger={triggerProps => {
      return <Button alignSelf="center" {...triggerProps}>
              Trigger
            </Button>;
    }}>
        <Popover.Content>
          <Popover.Arrow />
          <Popover.CloseButton />
          <Popover.Header>Data Saved</Popover.Header>
          <Popover.Body>Your changes has been saved.</Popover.Body>
        </Popover.Content>
      </Popover>

      <Select selectedValue={position} mx={{
      base: 0,
      md: "auto"
    }} accessibilityLabel="Select a position for Popover" onValueChange={nextValue => setPosition(nextValue)} _selectedItem={{
      bg: "cyan.600",
      endIcon: <CheckIcon size={4} />
    }}>
        <Select.Item label="auto" value="auto" />
        <Select.Item label="Top Left" value="top left" />
        <Select.Item label="Top" value="top" />
        <Select.Item label="Top Right" value="top right" />
        <Select.Item label="Right Top" value="right top" />
        <Select.Item label="Right" value="right" />
        <Select.Item label="Right Bottom" value="right bottom" />
        <Select.Item label="Bottom Left" value="bottom left" />
        <Select.Item label="Bottom" value="bottom" />
        <Select.Item label="Bottom Right" value="bottom right" />
        <Select.Item label="Left Top" value="left top" />
        <Select.Item label="Left" value="left" />
        <Select.Item label="Left Bottom" value="left bottom" />
      </Select>
    </VStack>;
}function Example() {
  const [position, setPosition] = useState("auto");
  return <VStack space={6} alignSelf="flex-start" w="100%">
      <Popover // @ts-ignore
    placement={position == "auto" ? undefined : position} trigger={triggerProps => {
      return <Button alignSelf="center" {...triggerProps}>
              Trigger
            </Button>;
    }}>
        <Popover.Content>
          <Popover.Arrow />
          <Popover.CloseButton />
          <Popover.Header>Data Saved</Popover.Header>
          <Popover.Body>Your changes has been saved.</Popover.Body>
        </Popover.Content>
      </Popover>

      <Select selectedValue={position} mx={{
      base: 0,
      md: "auto"
    }} accessibilityLabel="Select a position for Popover" onValueChange={nextValue => setPosition(nextValue)} _selectedItem={{
      bg: "cyan.600",
      endIcon: <CheckIcon size={4} />
    }}>
        <Select.Item label="auto" value="auto" />
        <Select.Item label="Top Left" value="top left" />
        <Select.Item label="Top" value="top" />
        <Select.Item label="Top Right" value="top right" />
        <Select.Item label="Right Top" value="right top" />
        <Select.Item label="Right" value="right" />
        <Select.Item label="Right Bottom" value="right bottom" />
        <Select.Item label="Bottom Left" value="bottom left" />
        <Select.Item label="Bottom" value="bottom" />
        <Select.Item label="Bottom Right" value="bottom right" />
        <Select.Item label="Left Top" value="left top" />
        <Select.Item label="Left" value="left" />
        <Select.Item label="Left Bottom" value="left bottom" />
      </Select>
    </VStack>;
}

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

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

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. Check out the default theme of the popover

here

Info: We can easily extend the popover component theme using extendTheme function as described in the documentation

here

Accessibility

Adheres to the

Dialog WAI-ARIA design pattern.

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.

Quick Nav

Keyboard Interactions

MadeWithNativeBase

gluestack-ui

Popover | NativeBase | Universal Components for React and React Native