[React Native] ScrollView 의 scrollTo, scrollToEnd 메서드가 작동하지 않는 문제

💫 참고 자료

• stackoverflow 질문
• React Native scrollview 공식 문서 - onContentSizeChange

문제

ScrollView 에 ref 를 걸어서, ScrollView 의 특정 위치로 스크롤을 이동해야 하는 경우가 생각보다 많다.
scrollTo 메서드와, scrollToEnd 메서드를 자주 사용하게 된다.

그런데 분명 해당 메서드를 탐에도 불구하고, 스크롤이 이동하지 않는 이상한 경우가 있다. 아니, 많다..

렌더 속도 때문에 생겨나는 문제다.

scrollTo 메서드와 scrollToEnd 메서드를 먼저 타고, 그 다음에 내용물이 렌더되면서 생기는 문제인 것이다.

이런 문제가 생겼을 때 자세히 보면, 화면이 먼저 한번 덜컹 하고 (scroll 을 시도했다는 뜻) 뒤늦게 화면이 렌더되는 걸 볼 수 있다.

해결책

ScrollView 의 onContentSizeChange props 를 사용하면 된다.

공식 문서의 onContentSizeChange 설명을 들어보면 다음과 같다.

Called when scrollable content view of the ScrollView changes.
ScrollView 내부의 content 가 변경되었을 때 불린다.

따라서 이렇게 하면 된다.

<ScrollView
  ref={scrollViewRef}
  onContentSizeChange={() => {
    // 여기다가 어떤 경우에 스크롤을 하면 될지에 대한 조건문을 추가하면 된다.
    this.scrollView.scrollToEnd({ animated: false })
  }}>
</ScrollView>