This is documentation for the next SDK version.

Background

A SwiftUI Background component for layering content behind another view.

iOS

tvOS

Included in Expo Go

GitHub

npm

Changelog

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 solid color, 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 }),
          ]}>
          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