Modality

기존 화면 위에 새로운 화면을 슬라이드 방식으로 표시하는 오버레이 컴포넌트입니다. 배경 화면이 축소되며, 새로운 화면이 하단에서 올라오는 형태로 네이티브 모달과 유사하게 동작합니다.

실제 앱에서 확인하세요

웹에서는 기본 전환과 콘텐츠 레이아웃을 확인할 수 있습니다. SafeArea, StatusBar, 화면 높이 변화, Android 하드웨어 뒤로가기와 폴더블 단일 화면 제한은 실제 iOS·Android 앱에서 확인하세요.

앱 예제 Playgroundv1.0.2

소스 보기새 창에서 열기

Interactive exampleModality 로컬 웹 예제

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

기본 사용법

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showModality } = useOverlay();

  const handleOpenModal = () => {
    showModality({
      component: <MyModalContent />,
    });
  };

  return <Button title="모달 열기" onPress={handleOpenModal} />;
}

API 참조

showModality 함수

showModality(props: ModalityProps): void

ModalityProps 인터페이스

Prop	Type	Default	Description
component	React.ReactNode	Required	모달로 표시할 컴포넌트
foldableSingleScreen	boolean	false	폴더블 디바이스에서 단일 화면 모드 사용 여부

특징

• 부드러운 애니메이션: 배경 화면이 축소되고 새 화면이 슬라이드됩니다
• 전체 화면: 모달 컴포넌트는 전체 화면 높이를 차지합니다
• SafeArea 지원: iOS의 SafeArea를 자동으로 고려합니다
• 폴더블 디바이스 지원: 폴더블 디바이스에서도 올바르게 동작합니다

예제

import { useOverlay, ZSContainer, ZSText, ZSPressable } from '@0610studio/zs-ui';

function MyModalContent() {
  const { hideOverlay } = useOverlay();

  return (
    <ZSContainer>
      <ZSText typo="heading.1">모달 제목</ZSText>
      <ZSText typo="body.2">모달 내용</ZSText>
      <ZSPressable onPress={() => hideOverlay('modal')}>
        <ZSText typo="body.2">닫기</ZSText>
      </ZSPressable>
    </ZSContainer>
  );
}

function MyComponent() {
  const { showModality } = useOverlay();

  return (
    <ZSPressable
      onPress={() => showModality({ component: <MyModalContent /> })}
    >
      <ZSText typo="body.2">모달 열기</ZSText>
    </ZSPressable>
  );
}