Add Modal Feature

[gorhom]

Feature Request

Why it is needed

This will the library to behave like a Modal View.

Possible implementation

We could introduce:

• BottomSheetContainerProvider: this will be responsible of:

  • holding the BottomSheet view.
  • mounting & unmount the BottomSheet when user trigger the modal.
  • exposing a new context for modal use.

• useBottomSheetModal: this will expose:

  • present a method that will mount the bottom sheet with initial close position, then snap to a provided snap point.
  • dismiss a method that will close the bottom sheet then unmount it.
  • snapTo a method to snap to a certain point.

Code sample

BottomSheetContainerProvider

# to be add at the root
<BottomSheetContainerProvider>
  <App />
</BottomSheetContainerProvider>

# 
const { present } = useBottomSheetModal()

...

const handlePresetView = () => {
  present({
    snapPoints: [100, '50%', '90%'],
    children: /** BOTTOM SHEET CONTENT */
  })
}

useBottomSheetModal

interface BottomSheetModalContext {
  present: (configs: BottomSheetProps) => void
  dismiss: () => void
  snapTo: (index: number) => void
}

[gorhom]

@sa8ab would you be interested 😉

[NishidaRyu416]

Surely, I am! I mean I gave up using an alternative module of this because it couldn’t be used from a child component to show contents over an existing content just like modal.

[gorhom]

@NishidaRyu416 im on it 👍