Skip to content

v0.1.0 — Initial release

Choose a tag to compare

View all tags
@ramssutharr ramssutharr released this 10 Sep 11:14
· 12 commits to main since this release
v0.1.0
a2f929a

Instagram-style native bottom sheet for React Native (Fabric / New Architecture).

The frame is native — present/dismiss spring, drag, detents, dim backdrop,
scroll ↔ sheet hand-off, keyboard handling, back gesture — implemented in UIKit
on iOS and Android Views on Android, with nothing running on the JS thread per
frame. The content is ordinary React.

Highlights

  • Inline mode: the sheet attaches to the hosting screen's own native view —
    above a tab bar, below anything the navigator pushes. Tap a name in comments,
    the profile slides over the open sheet; pop, and the sheet is exactly where
    you left it.
  • Gorhom-compatible API: snapPoints ('60%', dp, 'CONTENT_HEIGHT'),
    index, enableDynamicSizing, enablePanDownToClose, topInset,
    bottomInset, backgroundStyle, handleIndicatorStyle,
    handleComponent={null}, backdropColor/backdropOpacity,
    keyboardBehavior, onAnimate, onChange — and the same imperative ref
    (present(data), dismiss, close, snapToIndex, expand, collapse).
  • Gorhom's gesture model: the list is locked at offset 0 unless the sheet is
    fully expanded; a drag that reaches the top hands the rest of the gesture to
    the list; a fling settles the sheet with the list still.
  • Keyboard: the footer slot is pinned to the visible bottom and lifted
    natively; the sheet springs to its top detent when the keyboard opens
    (expandOnKeyboard) and drops the keyboard when dragged (dismissKeyboardOnDrag).
  • Instagram footer: pinned at the screen edge while the sheet is at or above
    its lowest detent; slides off with the sheet when dragged to dismiss.
  • SheetRouter: push/pop multi-step content inside one sheet.
  • useBottomSheetNativeLayout() / useBottomSheetNativeActions() for content.

Requirements

  • React Native ≥ 0.80 with the New Architecture (Fabric)
  • iOS 15.1+, Android minSdk 24
  • Autolinked; run pod install on iOS

Known limitations

  • Inline mode only (a sheet that must sit above pushed screens — "modal" mode — is planned)
  • A custom handleComponent is not rendered natively yet (null hides the grabber)
  • Ships untranspiled TypeScript: allow it through Jest's transformIgnorePatterns
Assets 2
Loading