TIL 26 ReactNative BottomSheet 구현

 

쿠팡같은 커머스 어플을 사용하면 처음들어갔을때 밑에 창에 이벤트 모달같은게 뜨는걸 볼 수 있는데 리액트 네이티브에서는

BottomSheet을 통해서 구현이 가능하다.

 

import BottomSheet from "reanimated-bottom-sheet"

 

npm install react-native-reanimated@2.2.4 로 version 2.2.4로 설치해준다. 굳이 2.2.4로 설치하는 이유는 

현재 최신버전인 2.3.1이 안드로이드쪽에서 트러블슈팅이 심각해서 이전버전을 설치하는게 정신건강에 좋다.

최신버전으로 설치해서 하루종일 고통받다가 결국 이전버전을 받는 나와 같은 경험을 안하는걸 추천한다.

 

바텀시트 기본 컴포넌트

속성들을 보면 initialSnap 초기 위치를 설정해주는데 보통 0 이나 1로 선택을 한다. 강조하고 싶은 속성이 바로 enabledContentGestureInteraction인데 이걸 false로 설정을 해줘야 안드로이드에서 닫기같은 버튼이나 

텍스트를 클릭했을때 내려가는 이벤트를 걸어줄 수 있다. 이거때문에 정말 한참 헤맸다. 이 속성은 default가 true인데

이대로 두면 안드로이드에서 onPress와 같은게 전혀 먹히지않는다.... 그리고 renderContent는 안에다 넣을 내용을

컴포넌트로 지정해주면 된다.

 

작성한 renderContent

해당내용이 나오는걸 볼 수 있다.