Best practices for conditional rendering a lot of BottomSheets?

[chen-rn]

I have about 5-10 sheets for different settings and I imagine this is not abnormal.
Should I be conditionally rendering the sheets like this? Though this makes outro animation difficult.

{showSheet && <BottomSheet/>}

Or should we be managing our sheets purely with Snap points?
something like?

<BottomSheet index={showSheet ? 0 : -1 } />

In this case, I'm worried that we are adding a huge amount of unnecessary data in the VDom? Also I see shadows on the bottom from all the cards :(.

How do you manage a lot of sheets?

[Eli-Nathan]

I'm facing a similar issue. You could switch to moving to <BottomSheetModal />
That has a present() and close() option that you can pass data to and render the different content in there. It should also fix the shadows showing because it is fully invisible when closed.

[Eli-Nathan]

Docs for present method

Usage example:
Lets say you have various bottom sheets. One that shows a map, one that shows some text, etc etc

const someData = { type: "MAP", foo: "bar" }
// This can be called from anywhere that you have access to the ref. Potentially stored in a context or state.
bottomSheetModalRef.current.present(someData)
// ...
return (
  <BottomSheetModal
    // ...props
  >
    {({ data }) => <MyBottomSheetContent data={data} />}
  </BottomSheetModal>
)

const MyBottomSheetContent = ({ data }) => {
  switch(data.type) {
    case "MAP":
      return <Map data={data} />
    case "TEXT":
      return <TextContent data={data} />
    // ... More cases and default case
  }
}

[fedpre]

I am getting a weird typescript error when I use this method, but everything else works. Anyone else experiencing that?