Popover

Show content with a trigger in a floating pane.

Anatomy

import { Popover } from 'tamagui' // or '@tamagui/popover'

export default () => (
  <Popover>
    <Popover.Trigger />

    <Popover.Content>
      <Popover.Arrow />
      <Popover.Close />
      {/* ScrollView is optional, can just put any contents inside if not scrollable */}
      <Popover.ScrollView>{/* ... */}</Popover.ScrollView>
      {/* ... */}
    </Popover.Content>

    {/* optionally change to sheet when small screen */}
    <Popover.Adapt when="sm">
      <Popover.Sheet>
        <Popover.Sheet.Overlay />
        <Popover.Sheet.Frame>
          <Popover.Sheet.ScrollView>
            <Popover.Adapt.Contents />
          </Popover.Sheet.ScrollView>
        </Popover.Sheet.Frame>
      </Popover.Sheet>
    </Popover.Adapt>
  </Popover>
)

API Reference

Contains every component for the popover.

Used to trigger opening of the popover when uncontrolled, just renders a YStack, see Stacks.

Renders as SizableStack which is just a YStack (see Stacks) with an extra size prop that accepts any SizeTokens.

Used to display the content of the popover.

Renders as YStack, see Stacks.

When you want the Trigger to be in another location from where the Popover attaches, use Anchor. When used, Anchor is where the Popover will attach, while Trigger will open it.

When used with Adapt, Popover will render as a sheet when that breakpoint is active.

See Sheet for more props.

Must use Adapt.Contents inside the Popover.Sheet.Frame to insert the contents given to Popover.Content

Must be nested inside Content. Renders as a plain React Native ScrollView. If used alongside <Adapt /> and Sheet, Tamagui will automatically know to remove this ScrollView when swapping into the Sheet, as the Sheet must use it's own ScrollView that handles special logic for interactions with dragging.