Skip to main content

BottomSheet v5 is finally out!

Mo Gorhom
Mo Gorhom
Author

I am happy to announce the long-awaited release of the React Native Bottom Sheet v5. In this release I have completely rewritten the entire gesture solution with the new React Native Gesture Handler v2, and I have added support for React Native Web to provide a performant simplified API across all React Native supported platforms.

This release has been delayed for a while now due to an increase in responsibilities and commitments in my daily job, moving forward I will try to find someone to help maintaining the project.

Features​

Web Support​

Supporting Web has been on my list since day 0 (issue #11), but unfortunately was not a priority until the community start adopting solutions such as Expo Web, which also provided an easier development setup for me to kick off the development.

With this release, users will be able to use the library in web mobile without changing the API 🪄.

info

🚧 Keyboard handling support for web will be followed shortly, PRs are always welcome.

This feature is enabled by default, Read more about Web Support.

Dynamic Sizing​

Re-introduced the dynamic sizing with 0 configuration from the user, where the library internally managed to calculate static views and list content size height and set it as the bottom sheet content height.

This feature is enabled by default, Read more about Dynamic Sizing.

FlashList Integration​

Previously, I have published the FlashList by Shopify integration for my sponsors only. However, with this release I decided to publish it for everyone ❤️. Users could easily use the pre-integrated component by importing BottomSheetFlashList from the library.

import { BottomSheetFlashList } from '@gorhom/bottom-sheet'

This feature is enabled by default, Read more about FlashList integration.

Improvements​

Refactored Snapping Mechanism​

The bottom sheet has multiple events that trigger its snapping to positions, whether a change in a snap point value, container height or the keyboard appearance. Since the introduction of keyboard handling in v4 there has been multiple issues reported regarding the bottom sheet snapping to a wrong position or sometimes not even reacting to resizing events. With this release, I have refactored the whole snapping mechanism from the scratch and built it working backward from the edge cases such as: content resizing, container resizing and keyboard appearance.

Migration​

As the introduction of the Dynamic Sizing, many might find their bottom sheets heights changes as it is enabled by default. To avoid such issues while migrating to v5, I recommend disabling it by setting the prop enableDynamicSizing to false, then try to figure out whether to use it or limit the dynamic content height by setting the prop maxDynamicContentSize.

Breaking Changes​

  • Updated Gesture Handler to v2
  • Updated Reanimated to v3
  • Updated enableDynamicSizing default value to true
  • Updated stackBehavior default value to switch

read all other changes in changelog.

Special thanks​

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

Special thanks to @Mahmoud-SK, @Eli-Nathan, @ororsatti, @janodetzel, @cenksari, @AndreiCalazans, @MoritzCooks, @fobos531, @ghorbani-m, @jaworek, @joshsmith, @david-gomes5, @christophby, @koplyarov, @beqramo, @magrinj, @gkueny, @eps1lon, @janicduplessis and others for testing & contributing to this release.

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