【React Native】フォームでエラーが出た時にエラー箇所にジャンプさせたい

Question

前提・実現したいこと

いつもお世話になっております。
React Nativeでアプリ開発をしているのですが、登録フォームでバリデーションエラーが出た際にエラー箇所までジャンプさせる方法が分からず質問させていただきました。

発生している問題・試したこと

色々調べた結果、ボタンをタップしてバリデーションで引っかかった時はscrollToでエラーが出た項目までジャンプさせようと考えました。
そのために、項目ごとにrefを追加してそれぞれmeasureで位置を取得しようとしたところ、取得した値がすべてundefinedになってしまいました。
下記ソースコードでは省略していますが、フォームの項目はContainerタグの中のScrollViewタグ内に書いています。

　<View ref={'Name'}>
 　　<Text>名前</Text>
  　　　<TextInput
   　　　　placeholder="例) ほげ"
   　　　　placeholderTextColor="gray"
   　　　　onChangeText={(val) => this.setState({ name: val })}
   　　　　value={this.state.name}
  　　　/>
　</View>

  scrollToError = () => {
    this.refs.Name.measure( (fx, fy, width, height, px, py) => {
      console.log('Component width is: ' + width)
      console.log('Component height is: ' + height)
      console.log('X offset to frame: ' + fx)
      console.log('Y offset to frame: ' + fy)
      console.log('X offset to page: ' + px)
      console.log('Y offset to page: ' + py)
    })
  }

 LOG  Component width is: undefined
 LOG  Component height is: undefined
 LOG  X offset to frame: undefined
 LOG  Y offset to frame: undefined
 LOG  X offset to page: undefined
 LOG  Y offset to page: undefined

初学者のためref等の動きもよく分っておらず、困っています。
解決方法、もしくはもっと良いやり方があればご教授いただきたいです。
よろしくお願いいたします。

Answer 1

こんにちは。

refを文字列で取得する方法は現在非推奨です。（React v17で削除されます）
代わりに下記の方法でrefを取得できます。

　<View ref={(ref) => this.nameRef = ref}>

参考: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md

Comments

[onakahetta]

ご回答ありがとうございます。非推奨とのこと、教えていただき助かりました。
measureの指定方法は　this.nameRef.measure　で合っていますか？
これで試したところ、まだundefinedのままでした...

Answer 2

手元の環境だと再現せずに動作しますが・・・
refを取得している<View>はreact-nativeからインポートしたViewですよね？
他ライブラリのViewだとmeasureが動作しないようですが・・・

Comments

[onakahetta]

ご回答ありがとうございます。
はい、react-nativeのViewを使用しています。

[nekoniki]

であればscrollToErrorが実行されたタイミングで<View>が描画されていないのだと思います。
scrollToErrorは具体的にどういったタイミングで実行される関数なのでしょうか？
また、確実に描画された際のサイズや座標を取得したい場合はonLayoutで取得した結果をstateに保持するのがお勧めです。

以下、onLayoutの参考です
https://qiita.com/karadaharu/items/07364597387e988c2648

[onakahetta]

scrollToErrorはボタンがタップされた後、バリデーションチェックではじかれた時に呼び出しています。
バリデーションチェックのfunction内でstateを書き換えているのですが、それで再レンダリングが実行されるのが影響していたりするのでしょうか...？
onLayoutでのやり方も試してみます。

[onakahetta]

onLayoutで試したところうまく取得することができましたので、こっちを使おうと思います。
ありがとうございました！