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

BottomSheet

A SwiftUI BottomSheet component that presents content from the bottom of the screen.

iOS

tvOS

GitHub

npm

Changelog

A bottom sheet component that slides up from the bottom of the screen to present content.

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

import { BottomSheet, Host, Text } from '@expo/ui/swift-ui';
import { useWindowDimensions } from 'react-native';

const { width } = useWindowDimensions();

<Host style={{ position: 'absolute', width }}>
  <BottomSheet isOpened={isOpened} onIsOpenedChange={e => setIsOpened(e)}>
    <Text>Hello, world!</Text>
  </BottomSheet>
</Host>

See official SwiftUI documentation for more information.

API

Component

`BottomSheet`

iOS

tvOS

Type: React.Element<BottomSheetProps>

BottomSheetProps

`children`

iOS

tvOS

Type: any

The children of the BottomSheet component.

`interactiveDismissDisabled`

iOS

tvOS

Optional • Type: boolean

Setting it to true will disable the interactive dismiss of the BottomSheet.

`isOpened`

iOS

tvOS

Type: boolean

Whether the BottomSheet is opened.

`onIsOpenedChange`

iOS

tvOS

Type: (isOpened: boolean) => void

Callback function that is called when the BottomSheet is opened.

`presentationBackgroundInteraction`

iOS

tvOS

Optional • Type: PresentationBackgroundInteraction

Controls how interactions on the dimmed background are handled while the sheet is visible.

automatic - System decides the interaction behavior (default)
enabled - Allow touches to pass through to the presenting view
disabled - Prevent interactions with the presenting view
{ type: 'enabledUpThrough', detent: <detent> } - Enable interactions while the sheet is expanded up through the specified detent

`presentationDetents`

iOS

tvOS

Optional • Type: PresentationDetent[]

Array of presentation detents for the BottomSheet. Controls the heights that the sheet can snap to.

medium - Medium height sheet
large - Full height sheet
number (0-1) - Fraction of screen height (for example, 0.4 equals to 40% of screen)

`presentationDragIndicator`

iOS

tvOS

Optional • Type: PresentationDragIndicatorVisibility

Controls the visibility of the drag indicator for the BottomSheet.

automatic - System decides based on context (default)
visible - Always show the drag indicator
hidden - Never show the drag indicator

Inherited Props

CommonViewModifierProps

Types

`PresentationBackgroundInteraction`

iOS

tvOS

Type: 'automatic' or 'enabled' or 'disabled' or object shaped as below:

Property	Type	Description
detent	`PresentationDetent`	-
type	`'enabledUpThrough'`	-

`PresentationDetent`

iOS

tvOS

Literal Type: union

Acceptable values are: 'medium' | 'large' | number

`PresentationDragIndicatorVisibility`

iOS

tvOS

Literal Type: string

Acceptable values are: 'automatic' | 'visible' | 'hidden'