What would be the best way to emulate this ios pat...

# compose

[ursus]

What would be the best way to emulate this ios pattern? (The modal sheet that leaves a bit of the screen underneath visible - but its nit just one view but can be a whole backstack)

[Stylianos Gakis]

If you're not building for iOS, the best way is probably by explaining to your designers that this is not what a typical Android user expects to see.
If you're building for iOS, probably best to just use rhe native impl.
I'd imagine this is far from trivial to pull off yourself, especially if you want all the functionality that this gives like the drag gestures etc.

[ursus]

For android

Well not sure if I agree, it's quite a useful pattern. I mean there used to be a way to do this with Fragments

Not sure why would the modal sheet thats on android be relegated to just a single pane

[ursus]

You could open a SheetFragment or whatever it was called and then have a nested fragment manager in it and push more fragments to it

[Stylianos Gakis]

If there's a way to do it with fragments then I'd say do it with fragments that host compose UI as their only functionality

[ursus]

now that I think of it .. can I have multiple navhosts with compose?

[Stylianos Gakis]

Yeah, you can have a bottom sheet which has a top level NavHost. Just don't expect deep links to work to that one by default

[ursus]

but the enclosing bottom sheet can be a navigable node from the outside?

[Stylianos Gakis]

If you make it a bottom sheet destination yeah.
Material has some code ready for you to use https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material-navigation/src/main/java/androidx/compose/material/navigation/ I am not sure about material3, but you can probably look at the impl here and copy it yourself if you are using some other bottom sheet implementation yourself

[Konstantin Tskhovrebov]

https://mohamedrejeb.github.io/Calf/ui/#adaptivebottomsheet

[Alex Styl]

Should be straightforward to do with unstyled's modal bottom sheet. you can make a full screen modal bottom sheet and add some padding on top

https://composeunstyled.com/modal-bottom-sheet/

[ursus]

but how do I create a backstack in it?

[Alex Styl]

the unstyled library gives you the bottom sheet component (pattern). you'd need to create a destination for the nav library you use manually (similarly to have accompanist used to have a bottom sheet destination).

I don't expect it to be difficult to do, but never tried