Popover

Popover displays content positioned relative to an anchor element. It supports configurable placement and dismissal via backdrop press.

Import

import { Popover } from '@ui-kitten/components';

Basic Usage

import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { Layout, Popover, Button, Text } from '@ui-kitten/components';

const PopoverExample = () => {
  const [visible, setVisible] = useState(false);

  const renderToggleButton = () => (
    <Button onPress={() => setVisible(true)}>Show Popover</Button>
  );

  return (
    <Layout style={{ flex: 1, padding: 16 }}>
      <Popover
        visible={visible}
        anchor={renderToggleButton}
        onBackdropPress={() => setVisible(false)}
        placement="bottom"
      >
        <Layout style={{ padding: 16 }}>
          <Text>Popover content goes here.</Text>
        </Layout>
      </Popover>
    </Layout>
  );
};

Props

Property	Type	Default	Description
visible	boolean	false	Whether the popover is visible.
anchor	() => ReactElement	-	Render function for the anchor element the popover is positioned relative to.
onBackdropPress	() => void	undefined	Called when the area outside the popover is pressed.
placement	'top' | 'top start' | 'top end' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left start' | 'left end' | 'right' | 'right start' | 'right end' | 'inner' | 'inner top' | 'inner bottom'	'bottom'	Position of the popover relative to the anchor.
backdropStyle	ViewStyle	undefined	Style applied to the backdrop.
children	ReactNode	-	Content rendered inside the popover.
fullWidth	boolean	false	Whether the popover matches the width of its anchor.
onPlacementChange	(placement: PopoverPlacement) => void	undefined	Called when the resolved placement differs from the requested one because of available space.
indicator	(props) => ReactElement	undefined	Render function for the arrow pointing at the anchor.
contentContainerStyle	ViewStyle	undefined	Style applied to the content container.
shouldUseContainer	boolean	true	Whether the content is wrapped in a positioning container.

Popover also accepts all standard React Native Modal props.

PopoverPlacements

PopoverPlacements is exported alongside the component and holds the placement constants used by placement, so you can write PopoverPlacements.TOP_START instead of the 'top start' string literal.

usePopoverMeasurement

usePopoverMeasurement is the hook Popover, Tooltip and OverflowMenu use to measure the anchor and compute a placement that fits on screen. It is exported for building custom overlay components on top of the same measurement logic.

Storybook

Live examples coming soon via Storybook.