feat: dismiss sheet with back button on android

[hirbod]

Feature Request

I'd like to be able to dismiss/close an open bottom sheet with the hardware back button on Android.

Why it is needed

Currently, the hardware back button on android does not close an open bottom sheet, instead it performs action behind the sheet (eg navigation)

Possible implementation

Add a optional prop, like enableAndroidBackButtonListener

Code sample

Add a optional prop, like enableAndroidBackButtonListener

[7maucdn]

I also need this feature

[HyopeR]

It would be really nice to dismiss with the Android back button.

[iarmankhan]

@hirbod @7maucdn @hirbod When I used this package in one of my project, I made a solution to achieve this same functionality. Here's a gist of that same, https://gist.github.com/iarmankhan/9409c2c5ecf2ed9ba930499bbda871c5

[vanenshi]

A more straightforward interface compare to @iarmankhan solution, but it's not mine, and I don't remember where I copy it :) I'll update this comment if I find out

https://gist.github.com/vanenshi/6c2938d2f7424979d76c06d66703df19

edit: I found it here: https://github.com/gorhom/react-native-bottom-sheet/issues/556#issuecomment-1023123434

[hirbod]

I also do have a self-baked hook for it but think that should just be baked into the library

[pierroo]

Thank you for sharing your hook @vanenshi ; can you let me know how I can associate it with the actual BottomSheet?

is there a props from the BottomSheet I should attach it to, or do I have to declare it everytime I use a bottomsheet?

[vanenshi]

Thank you for sharing your hook @vanenshi ; can you let me know how I can associate it with the actual BottomSheet?

is there a props from the BottomSheet I should attach it to, or do I have to declare it everytime I use a bottomsheet?

I didn't refactor it after that, but for each and every BottomSheetModal you need to provide it

take a look at this example:

  const modalRef = useRef<BottomSheetModal>(null);
  const { handleSheetPositionChange } =
    useBottomSheetBackHandler(modalRef);

  <BottomSheetModal
     ref={modalRef}
     onChange={handleSheetPositionChange} 
  />

[pierroo]

Thank you so much for your fast reply @vanenshi .

Unfortunately I just tried and I get the following error:

Although I am using exactly the code you provided. However I am not using BottomSheetModal, but the simple BottomSheet (no modal)

Could that explain the issue?

EDIT: Okay that was indeed my mistake, I had to edit your hook using BottomSheet and BottomSheetProps without modal. It works awesome, thanks again! :)

[vanenshi]

seems like there is PR related to this issue: https://github.com/synonymdev/bitkit/pull/303

[elmaxe]

This would be a nice built in feature