Popover | NativeBase

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
function Example() {
  return <Box h="60%" w="100%" alignItems="center">
      <Popover trigger={triggerProps => {
      return <Button {...triggerProps} shadow={2} colorScheme="danger">
              Delete Customer
            </Button>;
    }}>
        <Popover.Content accessibilityLabel="Delete Customerd" w="56">
          <Popover.Arrow />
          <Popover.CloseButton />
          <Popover.Header>Delete Customer</Popover.Header>
          <Popover.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </Popover.Body>
          <Popover.Footer justifyContent="flex-end">
            <Button.Group space={2}>
              <Button colorScheme="coolGray" variant="ghost">
                Cancel
              </Button>
              <Button colorScheme="danger">Delete</Button>
            </Button.Group>
          </Popover.Footer>
        </Popover.Content>
      </Popover>
    </Box>;
}function Example() {
  return <Box h="60%" w="100%" alignItems="center">
      <Popover trigger={triggerProps => {
      return <Button {...triggerProps} shadow={2} colorScheme="danger">
              Delete Customer
            </Button>;
    }}>
        <Popover.Content accessibilityLabel="Delete Customerd" w="56">
          <Popover.Arrow />
          <Popover.CloseButton />
          <Popover.Header>Delete Customer</Popover.Header>
          <Popover.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </Popover.Body>
          <Popover.Footer justifyContent="flex-end">
            <Button.Group space={2}>
              <Button colorScheme="coolGray" variant="ghost">
                Cancel
              </Button>
              <Button colorScheme="danger">Delete</Button>
            </Button.Group>
          </Popover.Footer>
        </Popover.Content>
      </Popover>
    </Box>;
}

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 <Box w="100%" alignItems="center">
      <Popover trigger={triggerProps => {
      return <Button {...triggerProps} colorScheme="danger">
              Delete Customer
            </Button>;
    }}>
        <Popover.Content accessibilityLabel="Delete Customerd" w="56">
          <Popover.Arrow />
          <Popover.CloseButton />
          <Popover.Header>Delete Customer</Popover.Header>
          <Popover.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </Popover.Body>
          <Popover.Footer justifyContent="flex-end">
            <Button.Group space={2}>
              <Button colorScheme="coolGray" variant="ghost">
                Cancel
              </Button>
              <Button colorScheme="danger">Delete</Button>
            </Button.Group>
          </Popover.Footer>
        </Popover.Content>
      </Popover>
    </Box>;
}function Example() {
  return <Box w="100%" alignItems="center">
      <Popover trigger={triggerProps => {
      return <Button {...triggerProps} colorScheme="danger">
              Delete Customer
            </Button>;
    }}>
        <Popover.Content accessibilityLabel="Delete Customerd" w="56">
          <Popover.Arrow />
          <Popover.CloseButton />
          <Popover.Header>Delete Customer</Popover.Header>
          <Popover.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </Popover.Body>
          <Popover.Footer justifyContent="flex-end">
            <Button.Group space={2}>
              <Button colorScheme="coolGray" variant="ghost">
                Cancel
              </Button>
              <Button colorScheme="danger">Delete</Button>
            </Button.Group>
          </Popover.Footer>
        </Popover.Content>
      </Popover>
    </Box>;
}

initialFocusRef


Playground
function Example() {
  const initialFocusRef = React.useRef(null);
  return <Box w="100%" alignItems="center">
      <Popover initialFocusRef={initialFocusRef} trigger={triggerProps => {
      return <Button {...triggerProps}>Edit Info</Button>;
    }}>
        <Popover.Content width="56">
          <Popover.Arrow />
          <Popover.CloseButton />
          {
          /* @ts-ignore */
        }
          <Popover.Header>Personal Details</Popover.Header>
          <Popover.Body>
            <FormControl>
              <FormControl.Label _text={{
              fontSize: "xs",
              fontWeight: "medium"
            }}>
                First Name
              </FormControl.Label>
              <Input rounded="sm" fontSize="xs" ref={initialFocusRef} />
            </FormControl>
            <FormControl mt="3">
              <FormControl.Label _text={{
              fontSize: "xs",
              fontWeight: "medium"
            }}>
                Last Name
              </FormControl.Label>
              <Input rounded="sm" fontSize="xs" />
            </FormControl>
          </Popover.Body>
          <Popover.Footer>
            <Button.Group>
              <Button colorScheme="coolGray" variant="ghost">
                Cancel
              </Button>
              <Button>Save</Button>
            </Button.Group>
          </Popover.Footer>
        </Popover.Content>
      </Popover>
    </Box>;
}function Example() {
  const initialFocusRef = React.useRef(null);
  return <Box w="100%" alignItems="center">
      <Popover initialFocusRef={initialFocusRef} trigger={triggerProps => {
      return <Button {...triggerProps}>Edit Info</Button>;
    }}>
        <Popover.Content width="56">
          <Popover.Arrow />
          <Popover.CloseButton />
          {
          /* @ts-ignore */
        }
          <Popover.Header>Personal Details</Popover.Header>
          <Popover.Body>
            <FormControl>
              <FormControl.Label _text={{
              fontSize: "xs",
              fontWeight: "medium"
            }}>
                First Name
              </FormControl.Label>
              <Input rounded="sm" fontSize="xs" ref={initialFocusRef} />
            </FormControl>
            <FormControl mt="3">
              <FormControl.Label _text={{
              fontSize: "xs",
              fontWeight: "medium"
            }}>
                Last Name
              </FormControl.Label>
              <Input rounded="sm" fontSize="xs" />
            </FormControl>
          </Popover.Body>
          <Popover.Footer>
            <Button.Group>
              <Button colorScheme="coolGray" variant="ghost">
                Cancel
              </Button>
              <Button>Save</Button>
            </Button.Group>
          </Popover.Footer>
        </Popover.Content>
      </Popover>
    </Box>;
}

Positions


Playground
function Example() {
  const [position, setPosition] = useState("auto");
  const [isOpen, setIsOpen] = useState(false);
  return <Box w="100%" alignItems="center">
      <VStack space={6} alignSelf="flex-start" w="100%">
        <Popover // @ts-ignore
      placement={position === "auto" ? undefined : position} trigger={triggerProps => {
        return <Button colorScheme="danger" alignSelf="center" {...triggerProps} onPress={() => setIsOpen(true)}>
                Delete Customer
              </Button>;
      }} isOpen={isOpen} onClose={() => setIsOpen(!isOpen)}>
          <Popover.Content w="56">
            <Popover.Arrow />
            <Popover.CloseButton onPress={() => setIsOpen(false)} />
            <Popover.Header>Delete Customer</Popover.Header>
            <Popover.Body>
              This will remove all data relating to Alex. This action cannot be
              reversed. Deleted data can not be recovered.
            </Popover.Body>
            <Popover.Footer justifyContent="flex-end">
              <Button.Group space={2}>
                <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsOpen(false)}>
                  Cancel
                </Button>
                <Button colorScheme="danger" onPress={() => setIsOpen(false)}>
                  Delete
                </Button>
              </Button.Group>
            </Popover.Footer>
          </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>
    </Box>;
}function Example() {
  const [position, setPosition] = useState("auto");
  const [isOpen, setIsOpen] = useState(false);
  return <Box w="100%" alignItems="center">
      <VStack space={6} alignSelf="flex-start" w="100%">
        <Popover // @ts-ignore
      placement={position === "auto" ? undefined : position} trigger={triggerProps => {
        return <Button colorScheme="danger" alignSelf="center" {...triggerProps} onPress={() => setIsOpen(true)}>
                Delete Customer
              </Button>;
      }} isOpen={isOpen} onClose={() => setIsOpen(!isOpen)}>
          <Popover.Content w="56">
            <Popover.Arrow />
            <Popover.CloseButton onPress={() => setIsOpen(false)} />
            <Popover.Header>Delete Customer</Popover.Header>
            <Popover.Body>
              This will remove all data relating to Alex. This action cannot be
              reversed. Deleted data can not be recovered.
            </Popover.Body>
            <Popover.Footer justifyContent="flex-end">
              <Button.Group space={2}>
                <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsOpen(false)}>
                  Cancel
                </Button>
                <Button colorScheme="danger" onPress={() => setIsOpen(false)}>
                  Delete
                </Button>
              </Button.Group>
            </Popover.Footer>
          </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>
    </Box>;
}

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

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

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