This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

Overlay

A SwiftUI Overlay component for layering content on top of another view.

iOS

tvOS

Included in Expo Go

GitHub

npm

Changelog

Expo UI Overlay matches the official SwiftUI overlay modifier and provides a way to layer secondary content on top of a view, positioned with a specified alignment.

A bell icon with a red 3 notification badge overlaid at the top-trailing corner

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

OverlayExample.tsx

import { Host, Overlay, Text, Image } from '@expo/ui/swift-ui';
import {
  foregroundStyle,
  frame,
  font,
  background,
  clipShape,
  offset,
} from '@expo/ui/swift-ui/modifiers';

export default function OverlayExample() {
  return (
    <Host style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Overlay alignment="topTrailing">
        <Image
          systemName="bell.fill"
          modifiers={[font({ size: 28 }), foregroundStyle('#007AFF')]}
        />
        <Overlay.Content>
          <Text
            modifiers={[
              font({ size: 11, weight: 'bold' }),
              foregroundStyle('#FFFFFF'),
              frame({ width: 18, height: 18 }),
              background('#FF3B30'),
              clipShape('circle'),
              offset({ x: 8, y: -8 }),
            ]}>
            3
          </Text>
        </Overlay.Content>
      </Overlay>
    </Host>
  );
}

API

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

Component

`Overlay`

iOS

tvOS

Type: React.Element<OverlayProps>

OverlayProps

`alignment`

iOS

tvOS

Optional • Type: Alignment • Default: 'center'

The alignment of the overlay content relative to the base content.

`children`

iOS

tvOS

Type: ReactNode

Inherited Props

CommonViewModifierProps