Popover
Show content with a trigger in a floating pane.
Features
Optional arrow to point to content.
Keeps within bounds of page.
Can be placed into 12 anchor positions.
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
Popover
Contains every component for the popover.
Props
children (required)
React.ReactNode
Must contain Popover.Content
size
SizeTokens
Passes size down too all sub-components when set for padding, arrow, borderRadius
placement
Placement
'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
modal
boolean
Default:
true
Renders into root of app instead of inline.
stayInFrame
ShiftProps | boolean
Keeps the Popover inside the frame, see floating-ui shift().
allowFlip
FlipProps | boolean
Moves the Popover to other sides when space allows it, see floating-ui flip.
unstyled
boolean
Removes all default Tamagui styles.
Popover.Trigger
Used to trigger opening of the popover when uncontrolled, just renders a YStack, see Stacks.
Popover.Content
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.
Popover.Anchor
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.
Popover.Sheet
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
Popover.ScrollView
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.