피드 상세보기 후 댓글 모두 보기 버튼을 누르면 나오는 댓글 패널창이다.
패널창 안에 댓글들을 FlatList로 띄웠는데 한가지 문제가 있었다.
❓ 문제: FlatList의 renderItem들이 스크롤 되지 않는다.
패널창이 아닌 경우에는 스크롤이 잘 됐는데 패널창 안에서만 스크롤이 안돼서 구글링도 하고 gpt도 찾아본 결과....
❗️원인: SlidingUpPanel과 FlatList 모두 스크롤에 관련된 것이라 제스처 충돌이 일어난다. 특히 상위에 있는 SlidingUpPanel 제스처 때문에 FlatList의 제스처는 막히게 된다.
⭕️ 해결: 내가 생각한 해결법은 패널창이 최대 높이에 도달했을 때 패널창 스크롤을 막고, FlatList 스크롤을 활성화 할 수 있도록 했다.
const [isPanelAtTop,setIsPanelAtTop]=useState<boolean>(false)
<SlidingUpPanel containerStyle={{backgroundColor:'white',height:height/1.2}}
ref={c=>panelRef.current=c}
draggableRange={{top:(height/1.5)*h,bottom:0}}
allowDragging={!isPanelAtTop}
onDragEnd={(position) => {
if (position === (height / 1.5) * h) {
setIsPanelAtTop(true); // 패널이 최상단에 도달했을 때
} else {
setIsPanelAtTop(false); // 패널이 최상단에서 내려가면
}
}}
>
<View style={{flex:1}}>
render items....
</View>
</SlidingUpPanel>
1. 패널이 최대 높이에 도달했는지에 대한 상태 변수를 추가
2. allowDragging 옵션으로 !isPanelAtTop 일때만 스크롤을 허용한다. (제스처 제어)
3. onDragEnd 옵션으로 드래그가 끝까지 도달했을 때 isPanelAtTop 상태를 변경해준다.
생각보다 간단하지만 처음에는 왜 패널창 안에서 FlatList가 스크롤이 안되는지 몰라 답답했다.... 스크롤 관련 컴포넌트들은 중첩되지 않도록 주의하자..!!