Popover

Component to display content in a floating container relative to a target element.
Supports custom positioning, offsets and target references.

Usage

Show Popover

function PopoverOverlayUsage() {
  const [showPopover, setShowPopover] = useState(false)

  return (
    <Popover
      visible={showPopover}
      Target={
        <Button onPress={() => setShowPopover((prev) => !prev)}>
          Show Popover
        </Button>
      }
      onDismiss={() => {
        setShowPopover(false)
      }}>
      <Text typography="h4">I am Popover Content</Text>
    </Popover>
  )
}

Position

Use the position prop to control where the popover appears relative to its target (e.g., top, bottom, left, right).

left

top

bottom

right

Show

function PopoverOverlayPosition() {
  const [showPopover, setShowPopover] = useState(false)
  const options: {label: string; value: string}[] = [
    'left',
    'top',
    'bottom',
    'right',
  ].map((value) => ({
    label: value,
    value,
  }))

  const [position, setPosition] = useState<PopoverPosition>('bottom')

  return (
    <View>
      <SegmentedButton
        data={options.map((item) => ({
          title: item.label,
          label: item.label,
          value: item.value,
        }))}
        onPress={(value) => setPosition(value as PopoverPosition)}
      />
      <Popover
        visible={showPopover}
        position={position}
        targetContainerStyle={{alignSelf: 'center'}}
        Target={
          <Button onPress={() => setShowPopover((prev) => !prev)}>Show</Button>
        }
        onDismiss={() => {
          setShowPopover(false)
        }}>
        <Text typography="h4">I am Popover Content. </Text>
      </Popover>
    </View>
  )
}

PopoverOffset

Use the offset prop to adjust the distance between the popover and its target element.

With Offset

function PopoverOverlayOffset() {
  const [showPopover, setShowPopover] = useState(false)

  return (
    <Popover
      visible={showPopover}
      offsetX={30}
      offsetY={10}
      Target={
        <Button onPress={() => setShowPopover((prev) => !prev)}>
          With Offset
        </Button>
      }
      onDismiss={() => {
        setShowPopover(false)
      }}>
      <Text typography="h4">I am Popover Content</Text>
    </Popover>
  )
}

With Arrow

Use withArrow prop to show an arrow pointing towards the target view

With Arrow

function PopoverOverlayArrow() {
  const [showPopover, setShowPopover] = useState(false)

  return (
    <Popover
      visible={showPopover}
      withArrow
      Target={
        <Button onPress={() => setShowPopover((prev) => !prev)}>
          With Arrow
        </Button>
      }
      onDismiss={() => {
        setShowPopover(false)
      }}>
      <Text typography="h4">Look at the arrow!</Text>
    </Popover>
  )
}

Arrow Offset

Adjust the arrow position with arrowOffset

Arrow Offset

function PopoverOverlayArrowOffset() {
  const [showPopover, setShowPopover] = useState(false)

  return (
    <Popover
      visible={showPopover}
      position="right"
      offsetX={10}
      offsetY={10}
      withArrow
      arrowOffset={-10}
      Target={
        <Button onPress={() => setShowPopover((prev) => !prev)}>
          Arrow Offset
        </Button>
      }
      onDismiss={() => {
        setShowPopover(false)
      }}>
      <Text typography="h4">Look at the arrow!</Text>
    </Popover>
  )
}

Fit target width

Enable fitToTargetWidth to automatically match the popover width to the target element’s width.

Show Popover

function PopoverOverlayFitTargetWidth() {
  const {colors} = useBlossomTheme()
  const [showPopover, setShowPopover] = useState(false)

  return (
    <Popover
      fitTargetWidth
      visible={showPopover}
      contentStyle={{backgroundColor: colors.primary100}}
      Target={
        <Button
          title="Show Popover"
          style={{width: '100%'}}
          onPress={() => setShowPopover((prev) => !prev)}
        />
      }
      onDismiss={() => setShowPopover(false)}>
      <Text typography="h6" status="accent">
        I am Popover Content
      </Text>
      <Button>Popover Button</Button>
    </Popover>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	--	--	--