TIL: RN | ScrollView 내부 영역의 bottom 영역으로 위치 유지하기

채팅 내용을 ScrollView 로 구현하여
새 채팅을 주고 받을 때,
키보드 영역이 올라오고 닫힐 때
scroll View 의 위치가 계속 변경되는 이슈가 있었다

새 메시지가 생겼을 경우와
키보드 영역이 올라오고 닫힐 때를 state 로 주어

  const scrollToBottom = () => {
    scrollRef.current?.measureInWindow((x, y) => {
      scrollViewRef.current?.scrollTo({ y, animated: false });
    });
  };

요런걸로 바텀 영역까지 이동시켰다

scrollRef 는 ScrollView 하위 View 영역
scroolViewRef 는 ScrollView 영역
ScrollView 에는 measureInWindow 메서드가 없기 떄문..

위와 같이 해도 원하는데로 작동하지 않았다..
아무래도 키보드 영역이 올라오고 닫히면서
영역의 크기가 바뀌기 때문에
바뀌는 중간에 y 를 구하게 된다면
일정하게 동작하지 않는 것..

ScrollView 의 onContentSizeChange 속성을 사용하니
원하는데로 정확하고 일정하게 동작함............

<ScrollView
  onContentSizeChange={() => {
    scrollViewRef.current?.scrollToEnd();
  }}
  ref={scrollViewRef}
>