React Navigation을 사용하여 아래쪽 탭을 누른 후 화면 상단으로 스크롤하는 UI 만들기

React Native가 제작한 앱에서는 화면 이동을 제어하기 위해 React Navigation을 사용할 때 유용한 tips를 소개한다.
아래 캡처와 같이 포커스 태그의 아래쪽 태그를 누를 때 화면 맨 위로 스크롤하는 UI를 만듭니다.
아래 탭을 클릭하면

위로 스크롤합니다.

React Navigation은 UI를 쉽게 구현할 수 있는 API를 제공합니다.
그것은 useScrollToTop입니다.
ScrollView 또는 Flatlist와 함께 사용할 수 있습니다.
함수 인터페이스 내부에서 사용할 때의 코드 샘플

import * as React from 'react';
import { ScrollView } from 'react-native';
import { useScrollToTop } from '@react-navigation/native';

function Albums() {
  const ref = React.useRef(null);

  useScrollToTop(ref);

  return <ScrollView ref={ref}>{/* content */}</ScrollView>;
}

샘플은 링크된 공식 문서에서 빌려왔습니다.
링크에는 클래스 구성 요소에서 사용하는 견본도 열거되어 있습니다.

주의점

아래와 같이 맨 아래 탭 안에 맨 윗부분 탭을 사용할 때 주의해야 한다.

아래쪽 레이블에 최상위 레이블이 있으면 아래쪽 레이블을 눌러도 스크롤되지 않습니다.
실제로 최상위 레이블(이 예에서 레이블 1이라고 적힌 레이블)을 누르면 스크롤이 발생합니다.useScrollToTop의 실시 방식을 보면 등급에서 가장 가까운 라벨 내비게이션에 tabPress 이벤트의 청중을 설정했다.따라서 가장 가까운 최상위 레이블을 누르면 스크롤 동작이 됩니다.
useScrollToTop.ts(발췌문)

export default function useScrollToTop(
  ref: React.RefObject<ScrollableWrapper>
) {
  const navigation = useNavigation();
  const route = useRoute();

  React.useEffect(() => {
    let current = navigation;

    // The screen might be inside another navigator such as stack nested in tabs
    // We need to find the closest tab navigator and add the listener there
    while (current && current.getState().type !== 'tab') {
      current = current.getParent();
    }

    if (!current) {
      return;
    }

    const unsubscribe = current.addListener(
      // We don't wanna import tab types here to avoid extra deps
      // in addition, there are multiple tab implementations
      // @ts-expect-error
      'tabPress',
      
      ...

맨 윗부분과 함께 사용하는 경우 밑단 라벨을 누르면 스크롤을 하려면 기댈 필요가 없다useScrollToTop. 스스로 스크롤을 제어하는 것도 필요하다.

총결산

React Navigation의useScrollToTop를 소개했다.편리한 함수를 제공해 주셔서 감사합니다.