Background

A SwiftUI Background component for layering content behind another view.

iOS

tvOS

Included in Expo Go

GitHub

npm

Changelog

Recommended version:

~58.0.2

Expo UI Background matches the official SwiftUI background modifier and draws background content behind a view, positioned with a specified alignment. The base view keeps its own size.

To fill a view with a color, material, or gradient, use the background modifier from @expo/ui/swift-ui/modifiers.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

Usage

Basic background

BackgroundExample.tsx

import {
  Background,
  Host,
  RoundedRectangle,
  Text,
} from '@expo/ui/swift-ui';
import {
  font,
  foregroundStyle,
  padding,
} from '@expo/ui/swift-ui/modifiers';

export default function BackgroundExample() {
  return (
    <Host
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Background>
        <Text
          modifiers={[
            font({ size: 17, weight: 'semibold' }),
            padding({ all: 16 }),
            foregroundStyle('#1C1C1E'),
          ]}>
          Card title
        </Text>
        <Background.Content>
          <RoundedRectangle
            cornerRadius={12}
            modifiers={[foregroundStyle('#E8F0FE')]}
          />
        </Background.Content>
      </Background>
    </Host>
  );
}

Background alignment

Use the alignment prop to position the background content relative to the base view. Because the background does not affect the layout of the base view, a smaller background can be pinned to one of its edges.

BackgroundAlignmentExample.tsx

import {
  Background,
  Host,
  Rectangle,
  Text,
} from '@expo/ui/swift-ui';
import {
  font,
  foregroundStyle,
  frame,
} from '@expo/ui/swift-ui/modifiers';

export default function BackgroundAlignmentExample() {
  return (
    <Host
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Background alignment="bottom">
        <Text modifiers={[font({ size: 17 })]}>
          Underlined by its background
        </Text>
        <Background.Content>
          <Rectangle
            modifiers={[
              frame({ height: 3 }),
              foregroundStyle('#007AFF'),
            ]}
          />
        </Background.Content>
      </Background>
    </Host>
  );
}

API

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

Component

`Background`

iOS

tvOS

Type: React.Element<BackgroundProps>

BackgroundProps

`alignment`

iOS

tvOS

Optional • Type: Alignment • Default: 'center'

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

`children`

iOS

tvOS

Type: ReactNode

Inherited props

CommonViewModifierProps