Popover

Floating content panel with arrow, placement options, and multiple visual variants.

iOSAndroid

Preview Popover on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-popover

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

import { Popover } from '@/components/docyrus-native/popover';

<Popover
  content="This is a helpful tip."
  placement="bottom"
  arrow
>
  <Text>Tap me</Text>
</Popover>

API Reference

Prop	Type	Default	Description
`visible`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	—	Open state change callback
`onClose`	`() => void`	—	Called when popover closes
`title`	`string`	—	Popover title text
`placement`	`PopoverPlacement`	`'bottom'`	Popover placement relative to trigger
`offset`	`number`	`10`	Distance from trigger in pixels
`arrow`	`boolean`	`true`	Show directional arrow
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Popover size
`variant`	`'default' \| 'elevated' \| 'minimal' \| 'glass'`	`'default'`	Visual variant
`delayHide`	`number`	`0`	Auto-hide delay in ms (0 = manual close)
`maxWidth`	`number`	—	Maximum popover width
`children`	`ReactNode`	—	Trigger element
`content`	`ReactNode`	—	Popover content (string or element)
`className`	`string`	—	Popover container CSS classes
`contentClassName`	`string`	—	Content area CSS classes

PopoverPlacement

Type Exports

Type	Description
`PopoverProps`	Props for Popover component
`PopoverPlacement`	Placement position union type
`PopoverSize`	`'sm' \| 'md' \| 'lg'`
`PopoverVariant`	`'default' \| 'elevated' \| 'minimal' \| 'glass'`