This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

Host

A SwiftUI Host component that enables SwiftUI components in React Native.

iOS

tvOS

GitHub

npm

Changelog

A component that allows you to put the other @expo/ui/swift-ui components in React Native. It acts like <svg> for DOM, <Canvas> for react-native-skia, which underlying uses UIHostingController to render the SwiftUI views in UIKit.

Since the Host component is a React Native View, you can pass the style prop to it or matchContents prop to make the Host component match the contents' size.

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

Match contents sizing

Use matchContents to let the Host automatically size itself to fit its SwiftUI content, instead of requiring explicit dimensions.

MatchContentsExample.tsx

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

export default function MatchContentsExample() {
  return (
    <Host matchContents>
      <Button
        onPress={() => {
          console.log('Pressed');
        }}>
        Click
      </Button>
    </Host>
  );
}

Explicit sizing with style

Use style to set explicit sizes on the Host, such as filling the available space with flex: 1.

ExplicitSizingExample.tsx

import { Button, Host, VStack, Text } from '@expo/ui/swift-ui';

export default function ExplicitSizingExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Text>Hello, world!</Text>
        <Button
          onPress={() => {
            console.log('Pressed');
          }}>
          Click
        </Button>
      </VStack>
    </Host>
  );
}

Ignoring keyboard safe area

Use ignoreSafeArea="keyboard" when React Native is already handling keyboard avoidance (for example, with react-native-keyboard-controller), to prevent the SwiftUI host from applying its own keyboard inset.

IgnoreKeyboardExample.tsx

import { Host, TextField } from '@expo/ui/swift-ui';
import { KeyboardProvider, KeyboardStickyView } from 'react-native-keyboard-controller';
import { View } from 'react-native';

export default function IgnoreKeyboardExample() {
  return (
    <KeyboardProvider>
      <View style={{ flex: 1, backgroundColor: 'black' }}>
        <KeyboardStickyView
          style={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            padding: 16,
            backgroundColor: 'green',
          }}>
          <Host matchContents ignoreSafeArea="keyboard" style={{ backgroundColor: 'red' }}>
            <TextField placeholder="Enter text" multiline />
          </Host>
        </KeyboardStickyView>
      </View>
    </KeyboardProvider>
  );
}

Ignoring all safe areas

Use ignoreSafeArea="all" when you want SwiftUI content to extend behind the status bar, useful for full-screen overlays or backgrounds.

IgnoreAllSafeAreasExample.tsx

import { Host, Text, VStack } from '@expo/ui/swift-ui';

export default function IgnoreAllSafeAreasExample() {
  return (
    <Host
      ignoreSafeArea="all"
      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
      <VStack>
        <Text>This content extends behind the status bar and home indicator.</Text>
      </VStack>
    </Host>
  );
}

API

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

Component

`Host`

iOS

tvOS

Type: React.Element<HostProps>

A hosting component for SwiftUI views.

HostProps

`children`

iOS

tvOS

Type: React.ReactNode

`colorScheme`

iOS

tvOS

Optional • Literal type: string

The color scheme of the host view.

Acceptable values are: 'light' | 'dark'

`ignoreSafeArea`

iOS

tvOS

Optional • Literal type: string

Controls which safe area regions the SwiftUI hosting view should ignore. Can only be set once on mount.

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

Acceptable values are: 'all' | 'keyboard'

`layoutDirection`

iOS

tvOS

Optional • Literal type: string

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

Acceptable values are: 'leftToRight' | 'rightToLeft'

`matchContents`

iOS

tvOS

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 SwiftUI. Can be only set once on mount.

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

`onLayoutContent`

iOS

tvOS

Optional • Type:

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

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

`style`

iOS

tvOS

Optional • Type: StyleProp<ViewStyle>

`useViewportSizeMeasurement`

iOS

tvOS

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 SwiftUI layout. This is particularly useful for SwiftUI views that need to fill their available space, such as Form.

Inherited Props

CommonViewModifierProps