Skip to content

v0.2.0 — gorhom parity

Choose a tag to compare

View all tags
@ramssutharr ramssutharr released this 12 Sep 06:36
· 6 commits to main since this release
v0.2.0
09092e7

Everything @gorhom/bottom-sheet does that a user can see or feel, on the native frame. Sheets ported from gorhom keep their prop names and, from this release, their defaults.

Stacking

  • stackBehavior — 'switch' (default: the sheet on top slides out with its content still mounted and comes back when the new one is dismissed), 'push', 'replace'. No provider needed.
  • name, useBottomSheetModal().dismiss(name?) / dismissAll(), and dismissAllSheets() outside React.
  • Ref gains minimize() / restore().

Animated values (Reanimated, optional)

  • Native onPositionChange emits the sheet's live position per frame, armed only while something listens.
  • A useEvent worklet writes it into shared values on the UI thread: animatedIndex / animatedPosition props, useBottomSheetAnimated(), and gorhom's useBottomSheet() shape.
  • Reanimated stays an optional peer; without it the same objects update when the sheet settles.

Modal mode

  • mode="modal" (or a containerComponent) attaches to React Native's root surface view, above every screen, with React touches intact.

Sizing and gestures

  • Detents are sorted by resolved height, so a content-sized detent lands wherever the content puts it (gorhom's dynamic-sizing rule). Every index refers to that order.
  • maxDynamicContentSize, snapToPosition(dp | '50%'), forceClose.
  • enableContentPanningGesture, enableHandlePanningGesture.
  • enableOverDrag / overDragResistanceFactor with gorhom's exact sqrt(1 + excess) × factor curve, from the handle or a body without a list.
  • detached with style side margins or detachedMargin, all corners rounded.
  • Custom handleComponent, rendered natively in a sheet-handle slot and given the animated values.
  • presentOnMount / animateOnMount for gorhom's non-modal BottomSheet.

Keyboard

  • keyboardBehavior="interactive" (keyboardMode="lift-sheet") is now hybrid: whatever the sheet cannot rise, the footer rises on its own, so a footer always clears the keyboard.
  • keyboardBlurBehavior="restore" returns to the pre-keyboard detent.
  • enableBlurKeyboardOnGesture (alias dismissKeyboardOnDrag).
  • New contentBottomInset: the content's own safe-area padding is spent over the keyboard instead of stacking on top of it.

Events

  • onChange(index, position, type) with SNAP_POINT_TYPE.PROVIDED | DYNAMIC.
  • onAnimate(from, to, fromPosition, toPosition).
  • onClose alias of onDismiss.

Accessibility and motion

  • VoiceOver / TalkBack labels on the backdrop and handle; the handle is an adjustable control that moves between detents.
  • Reduce Motion (iOS) and animator duration scale (Android) shorten the springs.

Also in this release (from 0.1.1)

  • Android: the hardware back press is claimed in JS while presented, so back closes the sheet instead of leaving the screen.

⚠️ Breaking: defaults now match gorhom 5.x

0.1.x 0.2.0
enableDynamicSizing false true
enableOverDrag false true (2.5)
keyboardBehavior expand to top 'interactive'
dismissKeyboardOnDrag true false
background system, radius 24 white, radius 15
handle 36×5 7.5% of the window × 4, 24dp area

Migration: sheets with fixed detents that must not gain a content-sized detent need enableDynamicSizing={false}; an Instagram-style comments sheet wants keyboardBehavior="extend" and dismissKeyboardOnDrag. The backdrop keeps BottomSheetBackdrop's defaults (black, 0.5, close on press); pass backdropOpacity={0} for gorhom's bare default.

Not covered

Custom backdropComponent (accepted, not rendered), gorhom's footerComponent render prop, Reanimated animationConfigs, and RNGH simultaneousHandlers / waitFor.

Full Changelog: v0.1.0...v0.2.0

Assets 2
Loading