REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Feedback & Overlay

Popover

A positioned overlay that appears relative to a trigger element.

Example

Preview

Code

Props

Popover Props

Prop

Type

Default

Description

isOpen

boolean

—

Controlled open state of the popover.

onOpenChange

(open: boolean) => void

—

Callback invoked when the open state changes.

placement

'top' | 'bottom' | 'left' | 'right'

'bottom'

The preferred placement of the popover relative to the trigger.

PopoverTrigger Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the trigger wrapper.

PopoverContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the popover content container.

PopoverArrow Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the arrow element.

PopoverHeader Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the popover header.

PopoverBody Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the popover body.

PopoverFooter Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the popover footer.

PopoverCloseButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the close button.

Usage Guidelines

When to use

Use Popover for contextual information, mini-forms, or secondary actions that appear near a trigger element.

Best practices

•

Use Popover for contextual content near a trigger — use Modal for larger or more complex content.

•

Include PopoverArrow to visually connect the popover to its trigger.

•

Dismiss on outside click for non-critical popovers.

Accessibility

Popover manages focus on open and returns focus to the trigger on close. Screen readers announce the popover content when opened.

Related Components

Tooltip

A popup component that displays informational text when a trigger element is pressed or long-pressed.

A dropdown menu triggered by a button or other element.

Modal

A compound overlay dialog component with backdrop, content, header, body, footer, and close button sub-components.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License