Popover

Popover displays rich content in a floating overlay. Use for additional information, mini-forms, or contextual help.

Preview

Light Dark OLED

Global

Tap for info

This is additional information displayed in a popover.

---

Basic Usage

Light Dark OLED

Global

Learn More

Popovers can contain any content, including text, images, or interactive elements.

<Popover
  content={<Text>Popovers can contain any content.</Text>}
>
  <Button>Learn More</Button>
</Popover>

---

Placements

Light Dark OLED

Global

top

Content

Trigger

Trigger

Content

bottom

Content

Trigger

left

right

Trigger

Content

<Popover placement="top" content={<Text>Top placement</Text>}>...</Popover>
<Popover placement="bottom" content={<Text>Bottom placement</Text>}>...</Popover>
<Popover placement="left" content={<Text>Left placement</Text>}>...</Popover>
<Popover placement="right" content={<Text>Right placement</Text>}>...</Popover>

---

With Rich Content

Light Dark OLED

Global

☰

☰Qián (The Creative)

Six unbroken lines representing pure yang energy.

<Popover
  content={
    <View style={styles.hexagramInfo}>
      <Text style={styles.symbol}>☰</Text>
      <Text style={styles.name}>Qián (The Creative)</Text>
      <Text style={styles.desc}>Six unbroken lines representing pure yang energy.</Text>
    </View>
  }
>
  <IconButton icon={<TrigramIcon />} accessibilityLabel="Trigram info" />
</Popover>

---

Without Arrow

Light Dark OLED

Global

Settings

This popover has no arrow pointing to the trigger.

<Popover
  content={<Text>No arrow popover</Text>}
  showArrow={false}
>
  <Button>Settings</Button>
</Popover>

---

Controlled

Light Dark OLED

Global

Click to toggle

Controlled popover content.

Close

const [isOpen, setIsOpen] = useState(false);

<Popover
  content={
    <View>
      <Text>Controlled popover content.</Text>
      <Button onPress={() => setIsOpen(false)}>Close</Button>
    </View>
  }
  visible={isOpen}
  onVisibleChange={setIsOpen}
>
  <Button onPress={() => setIsOpen(!isOpen)}>Toggle</Button>
</Popover>

---

API Reference

Popover Props

Prop	Type	Default	Description
content	ReactNode	Required	Popover content
children	ReactNode	Required	Trigger element
placement	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'	'bottom'	Popover placement
showArrow	boolean	true	Show arrow
closeOnPress	boolean	true	Close on content press
visible	boolean	-	Controlled visibility
onVisibleChange	(visible: boolean) => void	-	Visibility handler
style	ViewStyle	-	Custom styles