Bottom sheet in compose navigator?

[Tolriq]

Love your current implementation and was wondering if you had any plans to add support for modal bottom sheets in the compose library?

[KaustubhPatange]

That was one of the reasons I started to work on supporting Dialogs in navigator-compose & had pretty good success with it. The only problem I would think (which is not related to the library) is that the current implementation of Dialog in compose does not support enter & exit transitions. It is possible because a Compose Dialog is nothing but a composable shown inside of android.view.Window which we know already has support for enter & exit transition through anim, transition resource XMLs (pretty standard stuff). Also, they does not expose window in Dialog to manually add these properties.

The reason I brought transitions in Dialog was once they start supporting it for Compose Dialog's, bottom sheet would then just become an implementation detail rather than a problem because if you think bottom sheets are nothing but some content showing from the bottom of the screen (or top you aiming for top sheets) which has swipe support & dismisses at the bottom (more like a translation animation).

So with the Compose Dialog we get composable content in a new window. Now suppose we have support for enter & exit transition we can easily replicate the bottom sheet behavior (at least that's what I'm thinking) & if you know from the view system we have BottomSheetDialogFragment which is nothing but a DialogFragment that shows content from the bottom i.e bottom sheet.

If this problem is solved within compose itself then it would take me a day or two to come up with a solution for supporting bottom sheets. I also talked about this with Ian Lake (creator of Navigation Component) to which he replied there are no plans yet to integrate animations in Dialog. I can provide this support using some reflection hacks on window to enable this but they will not be performant & using XMLs for transition (seems like an old approach) that's why I'm not touching anything core & letting framework developers do this stuff depending on how they will plan it in the future (maybe).

So yes this request is on my list we just have to see how or if they are going to support transitions for Dialog? If I get a solid no from them then I guess you have to use the original approach from the docs unless I come up with some idea to work around it. Also, I saw that the latest accompanist library has support for BottomSheets for "Navigation component for Compose" using the navigation-material library which expects you to wrap your content within the ModalBottomSheetLayout to support bottom sheet. Although I'm not much a fan of this approach but I'll take a close look to see if I can implement something similar & scalable using my library.

Cheers :)

[Tolriq]

Thanks for the detailed answer. I must admit I was just thinking about the ModalBottomSheetLayout wrapper and not the dialog way.

Since I'm currently at design phase, I'll go with the ModalBottomSheetLayout without proper navigation until you come up with something and will try to use your library for the rest then. Thanks.

[KaustubhPatange]

Yeah I'm really hopping that they should support Dialog transitions so that I can also workaround the same problem you have.

Also, if you don't want to use ModalBottomSheetLayout approach you can use the approach I used for one of my app built using navigator-compose.

1. So you first start with BottomSheet which defines a BottomSheet composable for direct use instead of nesting ModalBottomSheetLayout.
2. You can then define a generic BaseBottomSheet built on top of navigator-compose to handle backpress & dismiss.
3. After that you can create your bottom sheet eg: from the app PremiumBottomSheet where you normally will place your composable content.
4. Now to use this sheet in any screen, first declare the state and then add the sheet which we implemented in above step, here.
5. Now to show & hide the sheet you just have to call premiumBottomSheet.show() or hide() depending on your case.

This approach is scalable & does not involve nesting of ModalBottomSheetLayout. Refactoring also becomes simple because all we did is just created a fake window like screen with the content showing from bottom. The only thing you should remember is you should not be doing too much work in the sheet as this will just sit at the bottom of your screen & when you show() it just translates from bottom. You should use this approach if your bottom sheet is acting like a dialog i.e accepting user input or showing yes, no dialog or any general purpose.

[Tolriq]

Thanks for the idea. Not sure it fully applies for my case where the bottom sheet needs to be shown over the navigation bar and other main things but from some nested sub screens. Will investigate more my options.

[KaustubhPatange]

Added a doc on how to use Dialog composable as a Bottom sheet, https://github.com/KaustubhPatange/navigator/wiki/Compose-Navigator-Tutorials#extending-dialogs-as-bottom-sheet.

Closing this issue.