[React Native] 안드로이드 중첩 scrollview

구름톤 1기 대상 작품인 "mooco"를 리액트 네이티브를 활용해 안드로이드로 리뉴얼하고 있다.

expo를 활용해 개발하고 있지만, 에뮬레이터, expo, rn 등 다 처음 접하는 것들이기에 어려움도 많다.

그나마 다행인건 리액트와 비슷하다는 것이다.

마주한 어려움_중첩 ScrollView

그러던 중 한 가지 어려움을 마주했다.

🚨 스크롤뷰 안에 스크롤뷰를 넣는 것.

어떠한 리스트가 있고, 그 리스트들을 스크롤하면 볼 수 있는데, 그 리스트의 어떤 버튼을 누르면 또 스크롤 할 수 있는 view가 나온다.

그래하여 대략

<ScrollView>
  <EventList />
  <FriendList />
</ScrollView>

이 속에서 FriendList 컴포넌트도 ScrollView로 감싸졌다.

그러다보니 전체에는 ScrollView가 되지만, FriendList에는 작동하지 않았다.

찾아보니

ScrollView가 겹쳐지게 된다면 가장 바깥쪽의 ScrollView만 작동한다고 한다. 바깥쪽의 ScrollView가 touch event를 모두 가져가기 때문이다.

해결 방법

그래서 등장한 것이 바로

nestedScrollEnabled

자식의 ScrollView에 nestedScrollEnabled 속성을 주면 해결이 된다!

이는 안드로이드를 위한 속성이다. ios에는 이미 nestedScrollEnabled 속성이 내장되어있어 따로 지정해주지 않아도 된다.

<ScrollView>
	<ScrollView nestedScrollEnabled>
    ...
    </ScrollView>
</ScrollView>

이렇게 하면 해결된다!