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

ModalBottomSheet

A Jetpack Compose ModalBottomSheet component that presents content from the bottom of the screen.

Android

GitHub

npm

Changelog

Expo UI ModalBottomSheet matches the official Jetpack Compose Bottom Sheet API and displays content in a modal sheet that slides up from the bottom.

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

Basic bottom sheet

BasicBottomSheetExample.tsx

import { useState } from 'react';
import { Host, ModalBottomSheet, Button, Column, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function BasicBottomSheetExample() {
  const [visible, setVisible] = useState(false);

  return (
    <Host matchContents>
      <Button onPress={() => setVisible(true)}>Open Sheet</Button>
      {visible && (
        <ModalBottomSheet onDismissRequest={() => setVisible(false)}>
          <Column verticalArrangement={{ spacedBy: 12 }} modifiers={[paddingAll(24)]}>
            <Text>Hello from bottom sheet!</Text>
            <Text>You can add more content here.</Text>
            <Button onPress={() => setVisible(false)}>Close</Button>
          </Column>
        </ModalBottomSheet>
      )}
    </Host>
  );
}

Full-screen bottom sheet

FullScreenBottomSheetExample.tsx

import { useState } from 'react';
import { Host, ModalBottomSheet, Button, Column, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function FullScreenBottomSheetExample() {
  const [visible, setVisible] = useState(false);

  return (
    <Host matchContents>
      <Button onPress={() => setVisible(true)}>Open Full Sheet</Button>
      {visible && (
        <ModalBottomSheet skipPartiallyExpanded={true} onDismissRequest={() => setVisible(false)}>
          <Column verticalArrangement={{ spacedBy: 12 }} modifiers={[paddingAll(24)]}>
            <Text>This sheet expands to full screen.</Text>
            <Text>Add as much content as you need.</Text>
            <Button onPress={() => setVisible(false)}>Close</Button>
          </Column>
        </ModalBottomSheet>
      )}
    </Host>
  );
}

API

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

Components

Deprecated: Use ModalBottomSheet instead.

`BottomSheet`

Android

Type: React.Element<ModalBottomSheetProps>

`ModalBottomSheet`

Android

Type: React.Element<ModalBottomSheetProps>

A Material Design modal bottom sheet.

ModalBottomSheetProps

`children`

Android

Type: React.ReactNode

The children of the ModalBottomSheet component.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onDismissRequest`

Android

Type: () => void

Callback function that is called when the bottom sheet is dismissed.

`skipPartiallyExpanded`

Android

Optional • Type: boolean • Default: false

Immediately opens the bottom sheet in full screen.