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

BottomSheet

GitHub

Changelog

npm

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

iOS

tvOS

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.

`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 (e.g. 0.4 = 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

`PresentationDetent`

iOS

tvOS

Literal Type: union

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

`PresentationDragIndicatorVisibility`

iOS

tvOS

Literal Type: string

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