Host

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

A container for universal @expo/ui content. On Android and iOS it re-exports the platform-native Host for Jetpack Compose/Host for SwiftUI, 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. Use Host as the root of any universal subtree so the same component tree works across all three platforms.

Installation

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

Usage

Basic usage

import { Host, Column, Text, Button } from '@expo/ui';

export default function HostExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Text>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/SwiftUI for the exact platform semantics). On web, the same prop is accepted for API parity but sizing is ultimately determined by the style you pass, since the web Host renders a plain React Native View.

import { Host, Button } from '@expo/ui';

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

API

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

Component