[RN]Modal

Modal Component

Modal은 React Native 자체 컴포넌트로 제공된다.
리액트와 달리 리액트 네이티브는 자체 컴포넌트가 많아 편리한 부분이 있는거같다.
사용 방법은 아래와 같이 여러 Props로 커스텀이 가능하다

    <Modal transparent={true} animationType="fade" visible={toggleHelp}>

onShow

모달 화면이 켜졌을 때 어떤 동작을 할 수 있도록 도와주는 속성이다.

<Modal onShow={() => alert("Hi")}/>

모달 화면이 표시되면 alert가 뜨게 된다.

visible

모달 화면을 표시/미표시를 결정하는 속성이다.
visible을 false로 하면 모달 화면이 보이지 않고, true로 하면 모달 화면이 뜨게된다.
Open을 눌렀을 때 모달 화면이 뜨도록 설정해 놓아도 visible이 false면 모달 화면이 띄워지지 않는 것처럼 보인다.

    <Modal visible={toggleHelp}>

transparent

<Modal transparent={false}/>

모달 화면을 투명하게 할 것인지를 결정하는 속성.

presentationStyle

모달 화면을 나타낼 스타일을 정하는 속성.

<Modal presentationStyle={"fullScreen"}/>

fullScreen, overFullScreen, pageSheet, formSheet 이렇게 총 4가지가 있다.
fullScreen은 transparent를 지원하지 않고 만약 투명한 전체 화면을 원한다면 overFullScreen을 사용하면 된다.

출처 및 참고 :
https://fomaios.tistory.com/entry/React-Native-Modal-component%EC%9D%98-%EA%B1%B0%EC%9D%98-%EB%AA%A8%EB%93%A0-%EA%B2%83
https://reactnative.dev/docs/modal