[React Native] 문제 해결 - Scroll View 와 Flatlist 스크롤 버벅거리는 문제

스크롤이 되지 않는 ScrollView

프로젝트 진행 중에 ScrollView 를 사용했는데 스크롤이 되지 않거나 굉장히 버벅되는 현상이 발생했다.

검색을 해 보니 대부분 flex 또는 flexwrap 설정을 바꿔주면 해결된다고 나와 있었지만 나에게는 전혀 통하지 않았다.

그러던 중 StackOverflow에서 TouchableWithoutFeedback 으로 ScrollView를 감싸 보라는 댓을 발견, 적용했더니 바로 해결되어 버렸다!

이유는?

아마도 현재 프로젝트에서 화면 전체를 이미 TouchableWithoutFeedback 으로 감싼 상태였던 것이 문제가 된 것 같다.

ScrollView 를 스크롤을 할 때의 터치 이벤트가 부모 touchable 요소인 TouchableWithoutFeedback 으로 가버린 것으로 추측된다.

이 때 onStartShouldSetResponder 를 사용해서 propagation을 막는 방법도 있다고 하는데 나는 그냥 Touchable로 감쌌을 때 바로 해결이 됐다!

아무튼 ScrollView 내에서, 그리고 Flatlist 의 경우 renderItem 에서 요소를 TouchableWithoutFeedback으로 감싸주면 아주 잘 동작한다ㅎㅎ

<ScrollView>
	<TouchableWithoutFeedback >
        ...
	<TouchableWithoutFeedback/>
<ScrollView/>

이런 식으로..!