Skip to main content

BottomSheet v4 is here!

Mo Gorhom
Mo Gorhom
Author

Today I am releasing the BottomSheet v4, with a rewritten implementation to provide more stability, performance, and more features.

Features​

In this release, I have rewritten the implementation to 100% utilize Reanimated v2 hooks and variables instead of using the JS once. This allows for more customization and provides more stability overall.

Keyboard Handling​

Keyboard handling was released with v3, however, there were some issues that pushed this release. Now the keyboard handling is enabled by default and provides more options to customize the behavior, a new prop android_keyboardInputMode is introduced to handle the Android keyboard appearance config windowSoftInputMode.

Read more about Keyboard Handling.

Pull to Refresh​

One of the earliest feature request that was submitted to repo Pull to refresh by gudberg. There was an attempt to implement it on v3 & v2 but I was hit with their limitations, until now.

This feature is enabled by default, users need to provide refreshing & onRefresh to any of the Scrollables and voila!

Read more about Pull to Refresh.

Detach Sheet / Modal​

Another powerful addition to BottomSheet & BottomSheetModal is the ability to detach the sheet from the bottom - so no more bottom sheet 😅 -, which allows users to come up with lots of creative choices and customization to the sheet position.

Read more about Detach Sheet / Modal.

Footer Component​

Lastly, I have added a new prop footerComponent to BottomSheet & BottomSheetModal to allow users to stick their custom component to the bottom of the sheet even when the keyboard is shown.

Read more about Footer Component.

Breaking changes​

Removed​

  • Removed animationEasing from BottomSheet props.
  • Removed animationDuration from BottomSheet props.
  • Removed closeOnPress from BottomSheetBackdrop props.
  • Removed dismissOnClose from BottomSheetModal props.
  • Removed enableFlashScrollableIndicatorOnExpand from BottomSheet props.

Changes​

  • snapPoints prop is no longer accepting 0 as a value.
  • animateOnMount props default value is true

Changelog​

Here are the highlight change log of v4

Refactored​

  • create one generic scrollable component (#442).
  • converted all internal state/memoized variables to reanimated shared values. (#430).
  • updated handling animated heights (#451).

Added​

  • added pull to refresh implementation (016a01f).
  • added enable pan down to close (#437).
  • added snap to position (#443).
  • added footer component (#457).
  • added pre-integrated VirtualizedList component (2d4d69d).
  • added keyboard input mode for android (069c4b6).
  • added detached bottom sheet (#487).
  • added onClose callback to BottomSheet (ee64545).
  • added backgroundStyle, handleStyle & handleIndicatorStyle to bottom sheet (2211765).
  • added forceClose to BottomSheet methods (3dd5796).

Fixed​

  • fixed sheet positioning on modals (ee573e9).
  • fixed prevent animatedPosition from becoming undefined (400d7b9).
  • fixed on mount flicker on fixed sheet (48c4988).
  • fixed updated keyboard height in container calculation (2599f6c).
  • fixed re-snap to current position when snap points get updated (bb8e202).
  • fixed handle initial closed sheet (4bc40d9).

Read the full change log.

Special thanks​

Thanks to all users for testing and reporting issues. Without your help, this library wouldn't progress this much ❤️

Special thanks to @kickbk, @vonovak, @likern, @nandorojo, @axeldelafosse & @skdev24 for testing & contributing to this release.

Finally, thanks to Software Mansion for powering this library with Reanimated & Gesture Handler.