BottomSheet v5

[gorhom]

Overview

This release will be mainly focus on rewriting the current gesture apis with GH v2 and provide Web support. However, there are other areas that we could improve such accessibility, performance and improve keyboard handling on Android but considered as a non-release blocker.

Goals

• [BLOCKER] Introduce Web support (feat: added web support #1150).
• [BLOCKER] Rewrite the package with Gesture Handler v2 api (feat: rewrite gesture apis with gesture handler 2 #1126).
• [BLOCKER] Ensure the package compatibility with Reanimated v3 (chore: updated reanimated to v3 #1324).
• Provide testing mocks to all exports.
• Improve accessibility support (6203c18).
• Optimise performance.
• Improve keyboard handling (a1ec74d).

Testing

yarn add ssh://git@github.com:gorhom/react-native-bottom-sheet#v5

Support

Any help will be welcome, from testing, ideation or contributing <3

[iamvucms]

Did you support multiple BottomSheet on current version ?

[gorhom]

current version does support multiple bottom sheets as modal stack! check the examples

[gorhom]

here is a PR that will introduce support for Web

#1150

[pierroo]

Where can we see the actual change this new version provides?
Since I had to update reanimated to v3 seems like I have no other choice but use this new bottom sheet v5 version, but I'm afraid to use it in production for it is only in alpha.
And I can't find any documentations about new stuff and point that we should be careful about etc.
@gorhom please let me know? :)

On the other hand, in a bottom sheet, when I use BottomSheetScrollView the scrolling isn't always working with reanimated v3 and bottomsheet v4.
It seems rather random, sometimes it scrolls down as expected within the content, sometimes the scroll within doesnt work at all and will only work when swiping to leave the bottomsheet.
So I feel like it might be due to incompatibility between reanimated v3 and bottomsheet v4 but I have no way of knowing.

[lucksp]

any chance the new version will include an updated package to react-native-gesture-handler so it's not on v1, but v2 instead? I am wondering if this is why my android compilations are failing due to this dependency being defined multiple times? Just a thought.

[LucasReinaldo]

hey @gorhom 👋 any chance of bumping react native reanimated to v3 in the current v4 version?

[spsaucier]

@eithe
v4 in node_modules after installing includes a lib folder:

v5 does not:

Its package.json says that the lib folder is where the entry point is:

And since there is none, the app can't find the package.

[thibaultcapelli]

@spsaucier I can confirm there I have no lib folder in v5 and I have also the typescript issue but the package still works

[spsaucier]

Oh, thank you @thibaultcapelli. That is very strange, but I can confirm - v5 is working even with the TS issue.

[spsaucier]

While it compiles for the application, it does fail for jest tests. I'll have to figure out how to make them work with the uncompiled version.

[thibaultcapelli]

@spsaucier Just in case, do not follow this command ssh://git@github.com:gorhom/react-native-bottom-sheet#v5 if you want the typescript definitions. Instead you can do @gorhom/bottom-sheet@alpha to install the latest alpha release (currently 5.0.0-alpha.4)

[markymc]

@gorhom Thank you very much for getting started on web support. I've been trying to make use of it but am facing some troubles. I'm wondering if you have any plans to rebase the v5 branch onto the latest v4 release? I had a quick look but I got a little out of my depth with conflicts. 🙇‍♂️

[thibaultcapelli]

@gorhom Could you please update the install command in your post to yarn add @gorhom/bottom-sheet@alpha ?

Cause the typescript definitions are not builded in the code repository but only in the releases.

[spsaucier]

@gorhom Will there be an alpha release to include enableDynamicSizing soon? As it stands, we are stuck on v4 until then, unless we rewrite our implementations back to the old style.

[gorhom]

im wrapping it up at the moment.. expect an alpha release today or tomorrow

[imranbarbhuiya]

Is there a migration guide/change log available for v5 alpha upgrade?

[dmregister]

@gorhom when do you expect v5 to out of alpha and into RC?

[gorhom]

Hi everyone, it is been a while 😅

before cutting the RC for v5, i wanted to refactor and improve the snapping sequencing which i have been working on for a while, here is a PR that should introduce this blocker improvement and i would like from you to test it if possible.

#1784

[kevinschaffter]

Just started using this new version and it is fantastic, thank you 🥳

One small issue I noticed is that I needed to explicitly pass in enabledDynamicSizing={false} even though in the docs it says it's false by default. This became especially apparent when my sheet had content that went past my largest snap point.

[gorhom]

Thanks @kevinschaffter for testing v5, dynamic sizing is enabled by default for this version. And yes it will fill up the parent if you have content that is large, that's why I introduced another property to limit that sizing 'maxDynamicContentSize'

[kevinschaffter]

Ah ok, sounds good. I was just confused at first as the docs for V5 said it was disabled by default.

[eithe]

Also tested this version now (for anyone else wondering I added/changed my package.json to say "@gorhom/bottom-sheet": "gorhom/react-native-bottom-sheet#refactor/refactor-snap-points-reactions", but note that you will miss typescript types when you do that).

Things seem to work as expected with this version which is great since I have been stuck on 5.0.0-alpha.4 (couldn't actually get my bottomsheets to appear at all on alpha.5 and .6 (haven't tried later versions, and didn't spend much time to debug)).

Like @kevinschaffter I also had to set enabledDynamicSizing={false} or else I got an error on that ("Invariant Violation: 'enableDynamicSizing' is enabled but children type is not integrated with the library ! expected children types are: ...")

Thanks for the update @gorhom, looks like you are on the right track with this :)

[gorhom]

Thanks for testing, I'll be merging the pr this weekend and prepare the first RC.

[gegana]

@gorhom would it be possible to change the default to false? Currently I would have to patch the package to avoid editing 30+ files :)

[khushal87]

Hey, @gorhom, how is it going while testing the package with a new architecture that uses the latest version of react-native and react-native-reanimated? When can we expect a stable release that would support the same?

[akylbek-hostaways]

Hi @gorhom. It is possible to add testID for this release?