Universal SheetNative sheets for React Native, Expo and web

Bottom sheets, modals, alerts, toasts and popovers with stacking, snap points and full design control. One API on iOS, Android and the browser.

Get started

Installation

View on GitHub

Phones showing a bottom sheet, a center modal and a toast

📱

Truly native

iOS uses UISheetPresentationController, Android uses Material BottomSheetDialog. React renders only your content.

🧱

Stacked sheets

Open a sheet on top of a sheet. Dismissing the top one returns to the one beneath with its state intact.

📏

Snap points

Percentages, points, named heights or content size. Move between them with snapTo, expand and collapse.

🎨

Full design control

Background, corner radius, border, shadow, backdrop, drag handle and any React Native style on your content.

🧩

23 presentation types

Bottom sheet, center modal, alert, side drawer, toast, snackbar, popover, tooltip, loading overlay and more, all from one config.

🌐

Expo and web

Works in Expo development builds. On the web every placement renders as an accessible DOM dialog.

Install

npmyarnExpo

npm install react-native-universal-sheet
cd ios && pod install

yarn add react-native-universal-sheet
cd ios && pod install

npx expo install react-native-universal-sheet
npx expo prebuild
npx expo run:ios   # or: npx expo run:android

See Installation for requirements, Expo and web setup.

Thirty-second example

tsx

import {Button} from 'react-native';
import {NativeSheetProvider, useNativeSheet} from 'react-native-universal-sheet';

export default function App() {
  return (
    <NativeSheetProvider>
      <Home />
    </NativeSheetProvider>
  );
}

function Home() {
  const sheet = useNativeSheet();
  return (
    <Button
      title="Open filters"
      onPress={() =>
        sheet.present({
          id: 'filters',
          content: <Filters />,
          snapPoints: ['50%', '90%'],
        })
      }
    />
  );
}

What it looks like

Bottom sheet

Center modal

Alert

Side drawer

Toast

Popover

These are placement diagrams. See Sheet types for all 23 and Platform support for what each platform draws today.

Early release (0.1.0)

The TypeScript API and the web renderer are complete and unit-tested. The native iOS and Android code has not yet been verified on a device, and on native every variant is currently presented as a bottom sheet. Read Status & roadmap before using this in production.