React Nativeで特定の要素にスクロールする

はじめに

scrollTo　を使った処理はよく見るのですが、もっと簡単に特定の要素の位置にスクロールしてほしいなーと調査していたら解決できたのでまとめました！

問題

measureLayoutというapiを使うのですが、そのままrefを入れるだけではダメなようで以下を参考にして ref を findNodeHandle でラッピングしています。
https://github.com/necolas/react-native-web/issues/1957#issuecomment-804455961

解決方法

  const scrollViewRef = useRef<ScrollView>(null)
  const targetRef = useRef<View>(null)

  const scrollToTarget = () => {
    const target = targetRef.current
    const scrollView = scrollViewRef.current

    if (!target || !scrollView) {
      return
    }

    target.measureLayout(
      // measureLayoutはrefではアクセスできないため、findNodeHandleでラッピングする
web/issues/1957#issuecomment-804455961
      findNodeHandle(scrollView) || 0,
      (x, y) => {
        scrollView.scrollTo({ y })
      },
      () => {
        console.error('error')
      }
    )
  }

おわりに

もっと早く知りたかった！

参考

• https://github.com/necolas/react-native-web/issues/1957#issuecomment-804455961