Popover

Expo UI Popover matches the official SwiftUI Popover API and provides a way to present content in a floating overlay anchored to a trigger element.

Usage

import { useState } from 'react';
import {
  Host,
  Button,
  Popover,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function BasicPopoverExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented =>
          setIsPresented(isPresented)
        }>
        <Popover.Trigger>
          <Button
            label="Show Popover"
            onPress={() => setIsPresented(true)}
          />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>Hello from Popover!</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

A popover reading Hello from Popover! floating above its trigger button

With attachment anchor

The attachmentAnchor prop controls where the popover attaches to the trigger element. Available options are: center, leading, trailing, top, and bottom.

import { useState } from 'react';
import {
  Host,
  Button,
  Popover,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function AttachmentAnchorExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented =>
          setIsPresented(isPresented)
        }
        attachmentAnchor="trailing">
        <Popover.Trigger>
          <Button
            label="Show Popover"
            onPress={() => setIsPresented(true)}
          />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>Attached to trailing edge</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

A popover attached to the trailing edge of its trigger button

With arrow edge

The arrowEdge prop controls which edge of the popover displays the arrow. Available options are: none, leading, trailing, top, and bottom.

import { useState } from 'react';
import {
  Host,
  Button,
  Popover,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function ArrowEdgeExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented =>
          setIsPresented(isPresented)
        }
        arrowEdge="top">
        <Popover.Trigger>
          <Button
            label="Show Popover"
            onPress={() => setIsPresented(true)}
          />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>Arrow on top edge</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

With React Native content

You can use RNHostView to embed React Native components inside the popover content.

import { useState } from 'react';
import { Pressable, Text as RNText, View } from 'react-native';
import {
  Host,
  Button,
  Popover,
  RNHostView,
} from '@expo/ui/swift-ui';

export default function RNContentPopoverExample() {
  const [isPresented, setIsPresented] = useState(false);
  const [counter, setCounter] = useState(0);

  return (
    <Host style={{ flex: 1 }}>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented =>
          setIsPresented(isPresented)
        }>
        <Popover.Trigger>
          <Button
            label="Show RN Popover"
            onPress={() => setIsPresented(true)}
          />
        </Popover.Trigger>
        <Popover.Content>
          <RNHostView matchContents>
            <View style={{ padding: 16 }}>
              <RNText style={{ fontSize: 16, fontWeight: 'bold' }}>
                React Native Content
              </RNText>
              <RNText style={{ color: '#666', marginVertical: 8 }}>
                Counter: {counter}
              </RNText>
              <Pressable
                style={{
                  backgroundColor: '#007AFF',
                  padding: 12,
                  borderRadius: 8,
                  alignItems: 'center',
                }}
                onPress={() => setCounter(counter + 1)}>
                <RNText style={{ color: 'white' }}>
                  Increment
                </RNText>
              </Pressable>
            </View>
          </RNHostView>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

A popover containing React Native text, a counter, and a blue Increment button

API

import { Popover } from '@expo/ui/swift-ui';

Component

Type: React.Element<PopoverViewProps>

Props

`arrowEdge`

Optional • Literal type: string • Default: 'none'

The edge of the attachmentAnchor that defines the location of the popover's arrow. The default is none, which results in the system allowing any arrow edge.

Acceptable values are: 'none' | 'top' | 'bottom' | 'leading' | 'trailing'

`attachmentAnchor`

Optional • Literal type: string

The positioning anchor that defines the attachment point of the popover.

Acceptable values are: 'center' | 'top' | 'bottom' | 'leading' | 'trailing'

`children`

Type: ReactNode

`isPresented`

Optional • Type: boolean

Whether the popover is presented.

`onIsPresentedChange`

Optional • Type: (isPresented: boolean) => void

A callback that is called when the isPresented state changes.

Inherited props

CommonViewModifierProps

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI version.

Expo UI lets you put any of the 89 modifiers for any view on Popover, but not all of them do something here.

74 change what you see on Popover.
2 work, but not in the way that you may expect.
2 have no visible effect on Popover.
13 work only in one place, such as a widget or a Grid.

Where the modifiers go

modifiers apply to the Popover.Trigger view, not to the popover. To change the popover, put the modifiers on the views in Popover.Content.

Modifier	What to know
`onAppear`	Runs for the trigger, not for the popover. To know when the popover opens, put it on a view in `Popover.Content`.
`onDisappear`	Runs for the trigger, not for the popover. To know when the popover opens, put it on a view in `Popover.Content`.

No visible effect on Popover

Popover accepts these modifiers, but you see no change. They do not give an error.

Modifier	Why nothing happens
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`zIndex`	It changes the order of views that cover each other in the same parent, and Popover does not stack its children.

Only in some places

These modifiers work only in a widget, in a Grid, in a Namespace or in a parent that asks for them.

Modifier	Where it works
`activityBackgroundTint`	Works only in a Live Activity. It has no effect in the app.
`alignmentGuide`	Has an effect only when the parent, such as a `VStack` or `ZStack`, aligns its children by the same guide.
`containerBackground`	Works only in a widget, or in a navigation container when you use a `navigation` placement.
`glassEffectId`	Works only on a view that also has `glassEffect`, in a `GlassEffectContainer` and a `Namespace`.
`gridCellAnchor` iOS 16+	Works only on a cell of a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellColumns`	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellUnsizedAxes`	Works only on a view in a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridColumnAlignment` iOS 16+	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`invalidatableContent` iOS 17+	Has an effect only when a parent view uses `redacted` with the `invalidated` reason.
`matchedGeometryEffect`	Works only in a `Namespace`. Give two views the same `id` and change between them with an animation.
`privacySensitive`	Has an effect only when a parent view uses `redacted` with the `privacy` reason.
`unredacted`	Has an effect only in a parent view that uses `redacted`.
`widgetURL`	Works only in a widget. It has no effect in the app.

Sources

The original Expo docs for this page:

Popover (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/popover.md)