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 PopoverUsage() {
  const [showPopover, setShowPopover] = useState(false)

  return (
    <Popover
      visible={showPopover}
      Target={
        <Button onPress={() => setShowPopover((prev) => !prev)}>
          Show Popover
        </Button>
      }
      onBackdropPress={() => {
        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).

Show

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

  const [position, setPosition] = useState<string | undefined>('bottom')

  return (
    <View>
      <Select
        options={options}
        value={position}
        onValueChange={(value) => setPosition(value)}
      />
      <Popover
        visible={showPopover}
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        position={position}
        // fitTargetWidth
        Target={
          <Button
            style={{alignSelf: 'center'}}
            onPress={() => setShowPopover((prev) => !prev)}>
            Show
          </Button>
        }
        onBackdropPress={() => {
          setShowPopover(false)
        }}>
        <Text typography="h4">{'I am Popover Content'.repeat(2)}</Text>
      </Popover>
    </View>
  )
}

PopoverOffset

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

With Offset

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

  return (
    <Popover
      visible={showPopover}
      offset={20}
      Target={
        <Button onPress={() => setShowPopover((prev) => !prev)}>
          With Offset
        </Button>
      }
      onBackdropPress={() => {
        setShowPopover(false)
      }}>
      <Text typography="h4">I am Popover Content</Text>
    </Popover>
  )
}

Ref Usage

Use targetRef to attach the popover to a specific element programmatically.

Show Popover

function PopoverTargetRefUsage() {
  const [showPopover, setShowPopover] = useState(false)
  const targetRef = useRef(null)

  return (
    <View>
      <View ref={targetRef}>
        <Button onPress={() => setShowPopover((prev) => !prev)}>
          Show Popover
        </Button>
      </View>
      <Popover
        visible={showPopover}
        targetRef={targetRef}
        onBackdropPress={() => {
          setShowPopover(false)
        }}>
        <Text typography="h6">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry
        </Text>
      </Popover>
    </View>
  )
}

Fit target width

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

Show Popover

function PopoverFitTargetWidth() {
  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)}
        />
      }
      onBackdropPress={() => 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	--	--	--
visible	boolean	--	Set it true to show the popover
children	ReactNode	--	Popover JSX content to show
onBackdropPress	() => void	--	callback on clicking the outside area or back button of the popover to close it
contentStyle	StyleProp<ViewStyle>	--	Style of the popover shown
Target	ReactNode	--	Render the target JSX using this prop
targetRef	LegacyRef<unknown>	--	Target ref object to control it without statesIf Target is passed then that will be given priority
fitTargetWidth	boolean	--	Set it true to have the same width as of the Target view
position	"left" | "right" | "top" | "bottom"	bottom	Popover content position
offset	number	--	Content offset
wrapContent	boolean	--	Wrap Content the popover