@corasan/modal-sheet

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