Surface

A Jetpack Compose Surface component for styled content containers.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

Expo UI Surface matches the official Jetpack Compose Surface API and provides a container that applies Material Design surface styling including color, elevation, and content color.

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

Basic surface

BasicSurfaceExample.tsx

import { Host, Surface, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function BasicSurfaceExample() {
  return (
    <Host matchContents>
      <Surface modifiers={[paddingAll(16)]}>
        <Text>Content on a surface</Text>
      </Surface>
    </Host>
  );
}

Surface with elevation

Use tonalElevation and shadowElevation to control the visual depth of the surface.

SurfaceElevationExample.tsx

import { Host, Surface, Column, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function SurfaceElevationExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Surface tonalElevation={1} shadowElevation={2} modifiers={[paddingAll(16)]}>
          <Text>Low elevation</Text>
        </Surface>
        <Surface tonalElevation={4} shadowElevation={8} modifiers={[paddingAll(16)]}>
          <Text>High elevation</Text>
        </Surface>
      </Column>
    </Host>
  );
}

Surface with custom colors

Use the color and contentColor props to override the default Material theme colors.

SurfaceCustomColorsExample.tsx

import { Host, Surface, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function SurfaceCustomColorsExample() {
  return (
    <Host matchContents>
      <Surface
        color="#1E3A5F"
        contentColor="#FFFFFF"
        tonalElevation={2}
        modifiers={[paddingAll(16)]}>
        <Text color="#FFFFFF">Custom colored surface</Text>
      </Surface>
    </Host>
  );
}

API

import { Surface } from '@expo/ui/jetpack-compose';

Component

`Surface`

Android

Type: React.Element<SurfaceProps>

A Material Design surface container. Surface is responsible for:

Clipping content to the shape
Applying background color based on tonal elevation
Providing content color to its children

SurfaceProps

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the surface.

`color`

Android

Optional • Type: ColorValue

The background color of the surface. Defaults to MaterialTheme.colorScheme.surface.

`contentColor`

Android

Optional • Type: ColorValue

The color of the content inside the surface. Defaults to contentColorFor(color).

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`shadowElevation`

Android

Optional • Type: number • Default: 0

The shadow elevation of the surface. Value in dp.

`tonalElevation`

Android

Optional • Type: number • Default: 0

The tonal elevation of the surface, which affects its background color based on the color scheme. Value in dp.