Host

A Jetpack Compose Host component for bridging React Native and Jetpack Compose.

Android

GitHub

npm

Changelog

Recommended version:

~55.0.17

The Host component is the bridge between React Native and Jetpack Compose. Every Jetpack Compose component from @expo/ui/jetpack-compose must be wrapped in a Host to render correctly.

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

Match contents

Use the matchContents prop to make the Host size itself to fit the content. You can pass a boolean or an object to control vertical and horizontal sizing independently.

MatchContents.tsx

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

export default function MatchContents() {
  return (
    <Host matchContents>
      <Button onClick={() => console.log('Pressed')}>Sized to content</Button>
    </Host>
  );
}

With style

Apply standard React Native styles to the Host wrapper.

HostWithStyle.tsx

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

export default function HostWithStyle() {
  return (
    <Host style={{ padding: 16, backgroundColor: '#f0f0f0', borderRadius: 8 }}>
      <Button onClick={() => console.log('Pressed')}>Styled host</Button>
    </Host>
  );
}

API

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

Component

`Host`

Android

Type: React.Element<HostProps>

HostProps

`children`

Android

Type: React.ReactNode

`colorScheme`

Android

Optional • Type: ColorSchemeName

The color scheme of the host view.

`ignoreSafeAreaKeyboardInsets`

Android

Optional • Type: boolean • Default: false

When true, the Compose content will not perform keyboard avoidance behaviour when keyboard is shown. Can be only set once on mount.

`layoutDirection`

Android

Optional • Literal type: string

The layout direction for the content. Defaults to the current locale direction from I18nManager.

Acceptable values are: 'leftToRight' | 'rightToLeft'

`matchContents`

Android

Optional • Literal type: union • Default: false

When true, the host view will update its size in the React Native view tree to match the content's layout from Jetpack Compose. Can be only set once on mount.

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

`onLayoutContent`

Android

Optional • Type:

(event: {
  nativeEvent: {
  height: number, 
  width: number
}
}) => void

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

`style`

Android

Optional • Type: StyleProp<ViewStyle>

`useViewportSizeMeasurement`

Android

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 Compose layout. This is particularly useful for views that need to fill their available space.

Inherited props

PrimitiveBaseProps