---
modificationDate: September 15, 2026
title: Host
description: A cross-platform Host component that wraps universal @expo/ui content.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-58/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'ios', 'web', 'expo-go']
---

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL.

# Host

A cross-platform Host component that wraps universal @expo/ui content.

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/versions/v58.0.0/sdk/ui/universal/host/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v58.0.0/sdk/ui/universal/host/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Reference (v58.0.0) > Expo UI > Universal
Pages in this section:
- [Overview](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal.md)
- [BottomSheet](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/bottomsheet.md)
- [Button](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/button.md)
- [Checkbox](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/checkbox.md)
- [Collapsible](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/collapsible.md)
- [Column](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/column.md)
- [FieldGroup](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/fieldgroup.md)
- [Host](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/host.md) (this page)
- [Icon](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/icon.md)
- [List](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/list.md)
- [Picker](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/picker.md)
- [RNHostView](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/rnhostview.md)
- [Row](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/row.md)
- [ScrollView](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/scrollview.md)
- [Slider](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/slider.md)
- [Spacer](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/spacer.md)
- [Switch](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/switch.md)
- [Text](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/text.md)
- [TextInput](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/textinput.md)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>
Android, iOS, Web, Included in Expo Go

A container for universal `@expo/ui` content. On Android and iOS it re-exports the platform-native [`Host` for Jetpack Compose](/versions/v58.0.0/sdk/ui/jetpack-compose/host.md)/[`Host` for SwiftUI](/versions/v58.0.0/sdk/ui/swift-ui/host.md), so Jetpack Compose/SwiftUI children render exactly as they would in the platform-specific packages. On web, it falls back to a React Native [`View`](https://reactnative.dev/docs/view). Use `Host` as the root of any universal subtree so the same component tree works across all three platforms.

Image: A Hello world label above a filled button

## Installation

```sh
# npm
npx expo install @expo/ui

# yarn
yarn expo install @expo/ui

# pnpm
pnpm expo install @expo/ui

# bun
bun expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview.md), make sure to [install `expo`](/bare/installing-expo-modules.md) in your project.

## Usage

### Basic usage

```tsx HostExample.tsx
import { useColorScheme } from 'react-native';
import { Host, Column, Text, Button } from '@expo/ui';

export default function HostExample() {
  const colorScheme = useColorScheme();

  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Text textStyle={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
          Hello, world!
        </Text>
        <Button label="Press me" onPress={() => alert('Pressed')} />
      </Column>
    </Host>
  );
}
```

### Match contents sizing

Use `matchContents` to let `Host` size itself to fit its content. On Android and iOS, this is forwarded to the platform-native `Host` (see [Jetpack Compose](/versions/v58.0.0/sdk/ui/jetpack-compose/host.md)/[SwiftUI](/versions/v58.0.0/sdk/ui/swift-ui/host.md) for the exact platform semantics). On web, it applies `alignSelf: 'flex-start'` to the underlying `View` so the host shrinks to fit its children instead of being stretched by its parent.

> **Note:** On web, the per-axis form (`{ horizontal: true }` / `{ vertical: true }`) behaves the same as the boolean form, since `alignSelf` only controls stretching on the parent's cross axis. Components that rely on independent per-axis sizing should expect the same shrink-to-fit behavior on web regardless of which axis is opted in.

```tsx MatchContentsExample.tsx
import { Host, Button } from '@expo/ui';

export default function MatchContentsExample() {
  return (
    <Host matchContents>
      <Button label="Sized to content" onPress={() => {}} />
    </Host>
  );
}
```

### Layout direction

Use `layoutDirection` to render the subtree as left-to-right or right-to-left. On Android and iOS, this is forwarded to the platform-native `Host` (see [Jetpack Compose](/versions/v58.0.0/sdk/ui/jetpack-compose/host.md)/[SwiftUI](/versions/v58.0.0/sdk/ui/swift-ui/host.md) for the exact platform semantics). On web, it sets the `dir` attribute on the underlying `View` so descendants inherit the chosen direction.

```tsx LayoutDirectionExample.tsx
import { useColorScheme } from 'react-native';
import { Host, Row, Text } from '@expo/ui';

export default function LayoutDirectionExample() {
  const colorScheme = useColorScheme();
  const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' };

  return (
    <Host
      layoutDirection="rightToLeft"
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <Row spacing={8}>
        <Text textStyle={ink}>First</Text>
        <Text textStyle={ink}>Second</Text>
      </Row>
    </Host>
  );
}
```

### Reacting to content layout

Use `onLayoutContent` to be notified of the current dimensions of the host's content. On Android and iOS, this is forwarded to the platform-native `Host` (see [Jetpack Compose](/versions/v58.0.0/sdk/ui/jetpack-compose/host.md)/[SwiftUI](/versions/v58.0.0/sdk/ui/swift-ui/host.md) for the exact platform semantics). On web, it is derived from the underlying `View`'s `onLayout` callback.

```tsx OnLayoutContentExample.tsx
import { useColorScheme } from 'react-native';
import { Host, Text } from '@expo/ui';

export default function OnLayoutContentExample() {
  const colorScheme = useColorScheme();

  return (
    <Host
      matchContents
      onLayoutContent={({ nativeEvent: { width, height } }) =>
        console.log(`content size: ${width}x${height}`)
      }>
      <Text textStyle={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
        Hello, world!
      </Text>
    </Host>
  );
}
```

### Filling the viewport

Use `useViewportSizeMeasurement` for content that should size to the available viewport space. On Android and iOS, this is forwarded to the platform-native `Host` (see [Jetpack Compose](/versions/v58.0.0/sdk/ui/jetpack-compose/host.md)/[SwiftUI](/versions/v58.0.0/sdk/ui/swift-ui/host.md) for the exact platform semantics). On web, the host's underlying `View` is given the current window's width and height; any explicit `style` you pass still wins.

```tsx UseViewportSizeMeasurementExample.tsx
import { useColorScheme } from 'react-native';
import { Host, Column, Text } from '@expo/ui';

export default function UseViewportSizeMeasurementExample() {
  const colorScheme = useColorScheme();

  return (
    <Host useViewportSizeMeasurement>
      <Column spacing={12} alignment="center">
        <Text textStyle={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
          Fills the viewport
        </Text>
      </Column>
    </Host>
  );
}
```

### Ignoring safe areas

By default, `Host` respects the device safe area insets (notch, home indicator, and so on). Use `ignoreSafeArea="all"` to let content extend edge-to-edge, or `ignoreSafeArea="keyboard"` to keep safe-area padding but ignore the keyboard inset. On Android and iOS, this is forwarded to the platform-native `Host` (see [Jetpack Compose](/versions/v58.0.0/sdk/ui/jetpack-compose/host.md)/[SwiftUI](/versions/v58.0.0/sdk/ui/swift-ui/host.md) for the exact platform semantics). On web, it is implemented via the CSS `env(safe-area-inset-*)` values applied as padding on the underlying `View`; the default also folds in `env(keyboard-inset-*)` for pages that opt in to the [VirtualKeyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).

```tsx IgnoreSafeAreaExample.tsx
import { useColorScheme } from 'react-native';
import { Host, Column, Spacer, Text } from '@expo/ui';

export default function IgnoreSafeAreaExample() {
  const colorScheme = useColorScheme();
  const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' };

  return (
    <Host ignoreSafeArea="all" style={{ flex: 1 }}>
      <Column alignment="center">
        <Text textStyle={ink}>Behind the status bar</Text>
        <Spacer flexible />
        <Text textStyle={ink}>Behind the home indicator</Text>
      </Column>
    </Host>
  );
}
```

### Forcing a color scheme

Use `colorScheme` to override the appearance of the subtree. Pass `'light'` or `'dark'` to force one, or omit it to follow the device setting. On Android and iOS, this is forwarded to the platform-native `Host` (see [Jetpack Compose](/versions/v58.0.0/sdk/ui/jetpack-compose/host.md)/[SwiftUI](/versions/v58.0.0/sdk/ui/swift-ui/host.md) for the exact platform semantics). On web, it sets `data-theme` on the underlying `View` so the design-token CSS variables resolve to the forced scheme regardless of `prefers-color-scheme`.

```tsx HostColorSchemeExample.tsx
import { Host, Button } from '@expo/ui';

export default function HostColorSchemeExample() {
  return (
    <Host colorScheme="dark" matchContents>
      <Button label="Always dark" onPress={() => {}} />
    </Host>
  );
}
```

### Seeding the color theme

Use `seedColor` to derive the theme applied to the subtree from a single base color. Each platform interprets it natively. On Android, it generates a full Material 3 palette (`SchemeTonalSpot`, the same algorithm as Material You) that themes Compose children and is exposed to descendants via [`useMaterialColors`](/versions/v58.0.0/sdk/ui/jetpack-compose/colors.md#usematerialcolorsoptions). On iOS, it is applied as the SwiftUI tint, propagating through the environment to theme interactive controls such as buttons, switches, and sliders. On web, it generates a primary color scale exposed as CSS variables to the underlying `View`. When omitted, each platform falls back to its default theme.

```tsx HostSeedColorExample.tsx
import { Host, Column, Button, Switch } from '@expo/ui';

export default function HostSeedColorExample() {
  return (
    <Host seedColor="#00bc7d" style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Button label="Themed button" onPress={() => {}} />
        <Switch value onValueChange={() => {}} />
      </Column>
    </Host>
  );
}
```

## API

```tsx
import { Host } from '@expo/ui';
```

## Component

### `Host`

Supported platforms: Android, iOS, Web.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<UniversalHostProps\>

A bridging container that hosts SwiftUI views on iOS and Jetpack Compose views on Android. On platforms without a native UI-toolkit binding (web, RN fallback), renders a plain `View`.

## Props

### `children`

Supported platforms: Android, iOS, Web.

Optional • Type: [ReactNode](https://reactnative.dev/docs/react-node)

### `colorScheme`

Supported platforms: Android, iOS, Web.

Optional • Type: `ColorSchemeName`

The color scheme to apply to the subtree. `'light'` / `'dark'` force a specific appearance; omitted follows the device setting.

### `ignoreSafeArea`

Supported platforms: Android, iOS, Web.

Optional • Literal type: `string`

Controls which safe area regions the hosting view should ignore.

-   `'all'`- ignores all safe area insets.
-   `'keyboard'` - ignores only the keyboard safe area.

Acceptable values are: `'all'` | `'keyboard'`

### `layoutDirection`

Supported platforms: Android, iOS, Web.

Optional • Literal type: `string`

Layout direction for the platform UI content. Defaults to the current locale direction from `I18nManager`.

Acceptable values are: `'leftToRight'` | `'rightToLeft'`

### `matchContents`

Supported platforms: Android, iOS, Web.

Optional • Literal type: `union` • Default: `false`

When `true`, the host updates its size in the React Native view tree to match the content's layout from the underlying platform UI toolkit. Can only be set once on mount.

Acceptable values are: `boolean` | `{ horizontal: boolean, vertical: boolean }`

### `onLayoutContent`

Supported platforms: Android, iOS, Web.

Optional • Type: `(event: { nativeEvent: { height: number, width: number } }) => void`

Callback function that is triggered when the content completes its layout. Provides the current dimensions of the content, which may change as the content updates.

### `seedColor`

Supported platforms: Android, iOS, Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

Seed color used to derive the theme applied to the host's subtree. Each platform interprets it natively:

-   On Android, it generates a full Material 3 palette (`SchemeTonalSpot`, the same algorithm as Material You) that themes Compose children and is exposed to descendants via `useMaterialColors()`.
-   On iOS, it is applied as the SwiftUI tint, propagating through the environment to theme interactive controls such as buttons, switches, and sliders.
-   On web, it generates a primary color scale exposed as CSS variables to the subtree.

When omitted, each platform falls back to its default theme.

### `useViewportSizeMeasurement`

Supported platforms: Android, iOS, Web.

Optional • Type: `boolean` • Default: `false`

When true and no explicit size is provided, the host will use the viewport size as the proposed size for layout. This is particularly useful for views that need to fill their available space, such as `List`.

### Inherited props

-   [ViewProps](https://reactnative.dev/docs/view#props)