How to use BottomSheet as a reusable component holding different content

[dani-z]

Hi there 👋

First I want to thank you for writing this awesome lib. I remember how hard it was when I wrote a basic version of this initially.
While using it in a fairly large app I found a need to reuse the main BottomSheet component and pass in a {children}. This way I can reuse the ref and outer component from many screens. All works OK until Android opens all of the sheets on top of each other. It doesn't happen on iOS.

Now I am not sure if what I do is correct hence I am writing this here.
Is there a better way to achieve this or is there any example that could help with this use case?

Many thanks,

[dani-z]

Anyone has any suggestions about this?

[dani-z]

Thanks for sharing @2hari, I can't see how the video could help with reusability of the same BottomSheet though 😕

[ser-emejia]

@dani-z Where did you place the BottomSheet component for doing resusable in the app? and did you achive to open it from differents components?

I'm trying to do it, but I can't. What I did was create a BottomSheet component for each use in the app.
And then when I want to open one of them from another component I import it in the same component that opens it.
It works, but I have to import that Bottomsheet every time I need to open it and I don't feel like it's the right way to do it.

[dani-z]

@ser-emejia yeah that's what I ended up doing too but, it makes the setup very inflexible. If I want to open the same sheet from multiple places I need to duplicate / import the sheet.

I haven't experimented just yet, but I was thinking on placing the BottomSheet in a provider, outside the main tree and have some sort of switch that switches just the content inside the BottomSheet based on the "type" of sheet I want to open. Tbh I am not sure if it will work if it's a good approach.

Would be really helpful if someone else that manage to do this could jump in and help shedding some light.
I will be updating this thread with any progress I make.