Skip to content

iOS like fullscreen modal Sheet component for iOS and Android.

License

Notifications You must be signed in to change notification settings

corasan/modal-sheet

Repository files navigation

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