@corasan/modal-sheet v2.0.4

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

Methods