WEB support - maxModalWidth and isDetached

[bc-tinker]

I am in the process of switching our project from using gorhom bottom sheets to using Truesheets, we are in a project that does both ios, android, and react native web. I have TrueSheets set up throughout the project including on web and it looks great when a web device is in a mobile format, but in desktop mode it alway expands the entire bottom sheet to fill the full width (see attached pictures)

Please add a way for me to set the maxModalWidth on web or similar, as well as a way to enable the gorhom bottom sheets isDetached prop for makes it appear not connected to the bottom of the screen.

[lodev09]

@bc-tinker try out v3.9-beta. It's now supported

[bc-tinker]

anchorOffset only works when you anchor your sheet to the left or right.

What I'd really like is to be able to center it on the screen in desktop screens, and stick it to the bottom on phones

This is already handled. Sheet will center when screen is < 600 width.

This is what I'm currently able to achieve on your 3.9 beta after having set the maxContentWidth. But as you can see on Desktop the sheet is still stuck to the bottom. Maybe I'm just missing a prop or didn't see a particular concept in the docs

This is the look I am trying to achieve, with the modal nicely vertically centered on desktop, but still attached to the bottom on mobile. With the corners all nicely rounded on the bottom

If there is a way to achieve that in the current version I'd love to know how. Thanks!

[lodev09]

Ah, bottom offset is not natively supported. What you can do is set sheet backgroundColor to transparent on android and web. then do a detached look yourself.

[bc-tinker]

is there any way that the isDetached prop from gorhom could be brought over the the web part somehow?

[lodev09]

@bc-tinker here: #527

[bc-tinker]

@bc-tinker here: #527

Amazing! Thanks. is it in the 3.9 beta? or the next release?