|
| 1 | +--- |
| 2 | +title: BottomSheet v5 is finally out! |
| 3 | +description: BottomSheet v5 a fully rewritten implementation to provide more stability, performance, and more features. |
| 4 | +authors: |
| 5 | + - gorhom |
| 6 | +slug: bottom-sheet-v5 |
| 7 | +keywords: |
| 8 | + - bottomsheet |
| 9 | + - bottom-sheet |
| 10 | + - bottom sheet |
| 11 | + - react-native |
| 12 | + - react native |
| 13 | + - ios |
| 14 | + - android |
| 15 | + - sheet |
| 16 | + - modal |
| 17 | + - presentation modal |
| 18 | + - reanimated |
| 19 | +tags: [release] |
| 20 | +date: 2024-10-05 |
| 21 | +image: /img/bottom-sheet-preview.gif |
| 22 | +hide_table_of_contents: false |
| 23 | +--- |
| 24 | + |
| 25 | +import useBaseUrl from "@docusaurus/useBaseUrl"; |
| 26 | +import Video from "@theme/Video"; |
| 27 | + |
| 28 | +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](https://blog.swmansion.com/introducing-gesture-handler-2-0-50515f1c4afc)**, and I have added support for **React Native Web** to provide a performant simplified API across all React Native supported platforms. |
| 29 | + |
| 30 | +{/* truncate */} |
| 31 | + |
| 32 | +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. |
| 33 | + |
| 34 | +## Features |
| 35 | + |
| 36 | +### Web Support |
| 37 | + |
| 38 | +Supporting Web has been on my list since day 0 ([issue #11](https://github.com/gorhom/react-native-bottom-sheet/issues/11)), but unfortunately was not a priority until the community start adopting solutions such as [Expo Web](https://docs.expo.dev/workflow/web/), which also provided an easier development setup for me to kick off the development. |
| 39 | + |
| 40 | +With this release, users will be able to use the library in web mobile without changing the API 🪄. |
| 41 | + |
| 42 | +<Video |
| 43 | + title="React Native Bottom Sheet Web Support" |
| 44 | + url={useBaseUrl("video/bottom-sheet-web-support-preview.mp4")} |
| 45 | +/> |
| 46 | + |
| 47 | + |
| 48 | +:::info |
| 49 | + |
| 50 | +🚧 Keyboard handling support for web will be followed shortly, PRs are always welcome. |
| 51 | + |
| 52 | +::: |
| 53 | + |
| 54 | +This feature is enabled by default, Read more about [Web Support](/web-support). |
| 55 | + |
| 56 | +### Dynamic Sizing |
| 57 | + |
| 58 | +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. |
| 59 | + |
| 60 | +<Video |
| 61 | + title="React Native Bottom Sheet Dynamic Sizing" |
| 62 | + url={useBaseUrl("video/bottom-sheet-dynamic-sizing-preview.mp4")} |
| 63 | +/> |
| 64 | + |
| 65 | +This feature is enabled by default, Read more about [Dynamic Sizing](/dynamic-sizing). |
| 66 | + |
| 67 | +### FlashList Integration |
| 68 | + |
| 69 | +Previously, I have published the [FlashList](https://shopify.github.io/flash-list/) by [Shopify](https://shopify.engineering/) 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. |
| 70 | + |
| 71 | +```tsx |
| 72 | +import { BottomSheetFlashList } from '@gorhom/bottom-sheet' |
| 73 | +``` |
| 74 | + |
| 75 | +<Video |
| 76 | + title="React Native Bottom Sheet FlashList" |
| 77 | + url={useBaseUrl("video/bottom-sheet-flashlist-preview.mp4")} |
| 78 | +/> |
| 79 | + |
| 80 | +This feature is enabled by default, Read more about [FlashList](/components/bottomsheetflashlist) integration. |
| 81 | + |
| 82 | +## Improvements |
| 83 | + |
| 84 | +### Refactored Snapping Mechanism |
| 85 | + |
| 86 | +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. |
| 87 | + |
| 88 | +## Breaking Changes |
| 89 | + |
| 90 | +- Updated Gesture Handler to **v2** |
| 91 | +- Updated Reanimated to **v3** |
| 92 | +- Updated `enableDynamicSizing` default value to **`true`** |
| 93 | +- Updated `stackBehavior` default value to `switch` |
| 94 | + |
| 95 | +read all other changes in [changelog](https://github.com/gorhom/react-native-bottom-sheet/blob/master/CHANGELOG.md). |
| 96 | + |
| 97 | +## Special thanks |
| 98 | + |
| 99 | +Thanks to all users for testing and reporting issues. Without your help, this library wouldn't progress this much ❤️ |
| 100 | + |
| 101 | +Special thanks to [@Mahmoud-SK](https://github.com/Mahmoud-SK), [@Eli-Nathan](https://github.com/Eli-Nathan), [@ororsatti](https://github.com/ororsatti), [@janodetzel](https://github.com/janodetzel), [@cenksari](https://github.com/cenksari), [@AndreiCalazans](https://github.com/AndreiCalazans), [@MoritzCooks](https://github.com/MoritzCooks), [@fobos531](https://github.com/fobos531), [@ghorbani-m](https://github.com/ghorbani-m), [@jaworek](https://github.com/jaworek), [@joshsmith](https://github.com/joshsmith), [@david-gomes5](https://github.com/david-gomes5), [@christophby](https://github.com/christophby), [@koplyarov](https://github.com/koplyarov), [@beqramo](https://github.com/beqramo), [@magrinj](https://github.com/magrinj), [@gkueny](https://github.com/gkueny), [@eps1lon](https://github.com/eps1lon), [@janicduplessis](https://github.com/janicduplessis) and others for testing & contributing to this release. |
| 102 | + |
| 103 | +Finally, thanks to [Software Mansion](http://swmansion.com/) for powering this library with `Reanimated` & `Gesture Handler`. |
0 commit comments