Skip to content

Release 2.1.0

Choose a tag to compare

@arekkubaczkowski arekkubaczkowski released this 11 Aug 07:23
· 4 commits to main since this release

Configurable backdrop

The shared backdrop's appearance was hardcoded to rgba(0, 0, 0, 0.5), and the only knob was backdrop: false on open(). Theming, blur and per-sheet variation all meant rendering your own backdrop inside the sheet — which loses what the shared one gives you: stack-aware z-indexing, living outside the BottomSheetScaleView transform, and being driven from the sheet's live animatedIndex.

Now the backdrop's look is configurable at two levels, while all of that behaviour stays with the manager.

// Group default
<BottomSheetManagerProvider
  id="default"
  backdrop={{ kind: 'styled', style: { backgroundColor: 'rgba(0,0,0,0.75)' } }}
>

// Per sheet — on any shipped adapter, in inline, portal and persistent mode alike
<GorhomSheetAdapter backdrop={{ kind: 'styled', style: { backgroundColor: 'rgba(0,0,0,0.2)' } }} />
<CustomModalAdapter backdrop={{ kind: 'custom', component: BlurBackdrop }} />
<SwmansionSheetAdapter backdrop={false} />

BackdropConfig is a discriminated union — kind: 'styled' for a scrim you restyle, kind: 'custom' to replace the rendering entirely. A custom component receives { sheetId, animatedIndex, close }; it gets the raw animatedIndex rather than a pre-computed opacity, so blur intensity or a gradient can be driven from the sheet's real position on the UI thread.

A sheet-level config replaces the group's rendering atomically, styles compose when both levels are styled, and pressToDismiss resolves per field.

Adapter authors get useAdapterBackdrop(id, backdrop) and AdapterBackdropProps — the same contract the five shipped adapters use.

📖 Backdrop documentation

Deprecations

Both still work and warn in dev. They go away in the next major.

  • backdrop?: boolean on open() → configure it on the sheet's adapter instead. The adapter prop lives with the sheet's other visual props, works in all three modes, and can restyle rather than only disable. To vary a backdrop per open, drive it from params.
  • backdropComponent on GorhomSheetAdapter → backdrop={{ kind: 'custom', component }}. The gorhom prop renders inside the sheet, so it is not stack-aware and it suppresses the manager's backdrop.

Notes

No migration is needed to upgrade from 2.0.x.

Full changelog: v2.0.1...v2.1.0