@impulse-ui-native/flyout

A token-driven, gesture-enabled sheet that can enter from the top or bottom of the screen.

Installation

pnpm add @impulse-ui-native/flyout react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-worklets

This package uses React Native Gesture Handler, Reanimated, Safe Area Context, and Worklets. Complete their native setup and render the flyout inside both GestureHandlerRootView and SafeAreaProvider.

Main exports

• Flyout renders the sheet, overlay, drag handle, title, safe-area padding, and lifecycle animations.
• FlyoutProps adds placement, topOffset, and bottomOffset to the common overlay contract.

Usage

import { Flyout } from "@impulse-ui-native/flyout";

<Flyout
  id="filters"
  title="Filters"
  open={filtersOpen}
  placement="bottom"
  onClose={() => setFiltersOpen(false)}
>
  <Filters />
</Flyout>;

The overlay closes the sheet when pressed. A drag past half the measured sheet height, or a sufficiently fast swipe toward the edge, closes it as well.

For app-wide imperative sheets, register Flyout through an OverlayStore and mount OverlayHost inside the matching OverlayProvider.