【React Native】入力欄にフォーカスが当たった際に要素が見える位置まで画面をスクロールする

iOS の場合、キーボードが表示されてもアプリの画面サイズは変化しないため、画面下部の入力欄をタップすると、その要素がキーボードに隠れてしまうという現象が発生します。
スクロールすれば表示できますが、ちょっと面倒…ということで、入力欄にフォーカスが当たったタイミングで画面をスクロールするという処理を追加しました。
参考にしたサイトがあったのですが…リンクを保存し忘れました。

サンプルコードはこちら。

this.inputFocused = refName => {
  const scrollResponder = this.refs.scrollView.getScrollResponder();
  const inputHandle = ReactNative.findNodeHandle(this.refs[refName]);
  scrollResponder.scrollResponderScrollNativeHandleToKeyboard (
    inputHandle,
    50,
    true,
  );
}

<ScrollView ref="scrollView">
  ......
  <View ref='hobby'>
    <TextInput
      value={this.state.name}
      onChangeText={value => this.setState({ name: value })}
      onFocus={() => this.inputFocused('name')} />
  </View>
  ......
</ScrollView>

this.inputFocused の 2、3 行目で、ScrollView と、入力欄の要素を取得し、ScrollView をその要素までスクロールさせています。
実際にスクロールを実行しているのは 4〜8行です。
scrollResponderScrollNativeHandleToKeyboard の引数には、それぞれ下記を指定します。

第1引数: 対象となる要素
第2引数: キーボードからどのくらい上にスクロールさせるかの offset
第３引数: マイナス方向へのスクロールを防ぐかどうか

なお、第2引数については、実際に動作させてみて調整するのがいいと思います。
個人的には 50 くらいがちょうどいいと思いましたが、ここはお好みで変更してください。

以上、React Native で入力欄にフォーカスが当たった際に要素が見える位置まで画面をスクロールする方法についてでした。
ご参考になれば幸いです。