Skip to main content
Version: Next

모달 컴포넌트는 상위 뷰 위에 콘텐츠를 표시하는 기본적인 방법이다.

참고 자료

Props​

View Props​

View Props를 상속한다.

animated​

더 이상 사용되지 않음. 대신 animationType prop을 사용한다.

animationType​

animationType 속성은 모달이 어떻게 애니메이션되는지 제어한다.

가능한 값:

  • slide: 아래에서 위로 슬라이드되며 나타남
  • fade: 서서히 나타남
  • none: 애니메이션 없이 바로 나타남
타입기본값
enum('none', 'slide', 'fade')none

backdropColor​

모달의 배경 색상을 지정한다. 모달 컨테이너의 배경색으로 사용된다. 값을 제공하지 않으면 기본값은 white이다. transparent가 true인 경우 이 값은 무시된다.

타입기본값
colorwhite

hardwareAccelerated
Android
​

hardwareAccelerated prop은 기본 윈도우에 하드웨어 가속을 강제로 적용할지 여부를 제어한다.

타입기본값
boolfalse

navigationBarTranslucent 프로퍼티는 모달이 시스템 네비게이션 바 아래로 들어갈지 여부를 결정한다. 다만, 네비게이션 바를 반투명하게 만들려면 statusBarTranslucent도 true로 설정해야 한다.

타입기본값
boolfalse

onDismiss
iOS
​

onDismiss prop은 모달이 닫힌 후 호출될 함수를 전달할 수 있게 해준다.

타입
function

onOrientationChange
iOS
​

onOrientationChange 콜백은 모달이 표시되는 동안 화면 방향이 변경될 때 호출된다. 제공되는 방향은 'portrait'(세로) 또는 'landscape'(가로)만 가능하다. 이 콜백은 초기 렌더링 시에도 현재 방향과 관계없이 호출된다.

타입
function

onRequestClose 콜백은 사용자가 Android에서 하드웨어 뒤로 가기 버튼을 누르거나 Apple TV에서 메뉴 버튼을 누를 때 호출된다. 이 필수 prop 때문에 모달이 열려 있는 동안에는 BackHandler 이벤트가 발생하지 않는다는 점에 주의해야 한다.

iOS에서는 presentationStyle이 pageSheet 또는 formSheet일 때, 드래그 제스처로 모달을 닫을 때 이 콜백이 호출된다.

타입
function
필수
Android
TV
function
iOS

onShow​

onShow 프로퍼티는 모달이 표시된 후 호출될 함수를 전달할 수 있다.

타입
function

presentationStyle
iOS
​

presentationStyle 프로퍼티는 모달이 어떻게 표시될지 제어한다. 주로 iPad나 플러스 사이즈 아이폰과 같은 대형 기기에서 사용된다. 자세한 내용은 Apple 공식 문서를 참고한다.

가능한 값:

  • fullScreen: 화면 전체를 덮는다.
  • pageSheet: 세로 방향의 뷰 중앙을 덮는다. (대형 기기에서만 적용)
  • formSheet: 좁은 너비의 뷰 중앙을 덮는다. (대형 기기에서만 적용)
  • overFullScreen: 화면 전체를 덮지만, 투명도를 허용한다.
타입기본값
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')transparent={false}일 경우 fullScreen
transparent={true}일 경우 overFullScreen

statusBarTranslucent
Android
​

statusBarTranslucent 프로퍼티는 모달이 시스템 상태 표시줄 아래로 들어갈지 여부를 결정한다.

타입기본값
boolfalse

supportedOrientations
iOS
​

supportedOrientations 프로퍼티는 모달이 지정된 방향 중 하나로 회전할 수 있게 한다. iOS에서는 모달이 앱의 Info.plist 파일에 정의된 UISupportedInterfaceOrientations 필드의 값에 따라 제한된다.

presentationStyle이 pageSheet나 formSheet로 설정된 경우, 이 프로퍼티는 iOS에서 무시된다.

타입기본값
열거형('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')의 배열['portrait']

transparent​

transparent 속성은 모달이 전체 화면을 채울지 여부를 결정한다. 이 값을 true로 설정하면 모달이 투명한 배경 위에 렌더링된다.

타입기본값
boolfalse

visible​

visible 프롭은 모달의 표시 여부를 결정한다.

타입기본값
booltrue