Installation

npm install @corasan/modal-sheet
yarn add @corasan/modal-sheet
bun add @corasan/modal-sheet

Usage

First, wrap your application with the ModalSheetProvider component.

import { ModalSheetProvider } from '@corasan/modal-sheet';

function App() {
  return (
    <ModalSheetProvider>
      <YourApp />
    </ModalSheetProvider>
  );
}

Use refs to expand and minimize the modal sheet.

import { ModalSheetStackRef, ModalSheetStack } from '@corasan/modal-sheet';

function YourComponent() {
  const modalRef = useRef<ModalSheetStackRef>()

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Butto title="Open Modal" onClick={() => modalRef.current.open())} />

      <ModalSheetStack ref={modalRef} name="modal-drawer">
        <View style={{ flex: 1 }}>
          <View style={{ flexDirection: "row", justifyContent: "center" }}>
            <Text style={{ fontWeight: "500", fontSize: 18 }}>Title</Text>
          </View>

          <View
            style={{
              paddingVertical: 40,
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Button
              title="Close Modal"
              onPress={() => {
                modalRef.current.dismiss();
              }}
            />
          </View>
        </View>
      </ModalSheetStack>
    </View>
  );
}

Components

ModalSheetStack

The ModalSheetStack component is a modal sheet that can be opened and dismissed. It creates a modal sheet effect similar to the iOS modal sheet.

Props

| Name | Type | Default | Description | Required | | --- | --- | --- | --- | --- | | ref | React.RefObject<ModalSheetStackRef> | - | Ref for the modal sheet | Yes | | name | string | - | The name of the modal sheet | Yes | | children | ReactNode | - | The children components | Kinda yeah | | containerStyle | string | - | Styles for the modal sheet container | No | | noHandle | boolean | false | Hide the handle | No | | onDismiss | () => void | - | Callback when the modal sheet is dismissed | No | | enableDragToDismiss | boolean | true | Enable dragging to dismiss the modal sheet | No |

Methods

| Name | Type | Description | | --- | --- | --- | | open | () => void | Open the modal sheet | | dismiss | () => void | Dismiss the modal sheet |