【React Native】ScrollView内の要素を上下左右中央寄せする

React Native でアプリを開発する際、ページの要素を画面の上下左右中央寄せで表示したいけど、文字入力でソフトウェアキーボードが表示されたときには画面をスクロールさせたい！ということを行ったので、その対処方法をまとめ。
ちなみに、ログインページで実装しました。

参考にさせていただいた記事はこちらから。

scrollview — React Native：ScrollView使用時の垂直方向のセンタリング
https://www.it-swarm-ja.tech/ja/scrollview/react-native：scrollview使用時の垂直方向のセンタリング/1055334241/amp/

ちょっと日本語がおかしいですが、そこはお気になさらず…。

さて、実装方法は下記のとおりです。

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scroll: {
    justifyContent: 'center',
    flexGrow: 1,
  },
});

render の return は下記のように記述しています。

<SafeAreaView style={styles.container}>
  <ScrollView contentContainerStyle={styles.scroll}>
    <View>
      {/* 表示したい要素 */}
    </View>
  </ScrollView>
</SafeAreaView>

ポイントは、styles の scroll に指定した flexGrow: 1 です。
flexGrow は「フレックスコンテナの主軸の幅に余白がある場合の、フレックスアイテムの伸び率」とのことですが…いまいち意味はよく分かっていません…。
時間を見つけてこれから理解したいと思います…。

なお、こちらのコードですが、まだ Android でしか正常に動作することを確認しておりません。
もしかしたら、iOS では期待した通りに動作しない可能性もあるのでご注意ください。
私はこれから確認します！

以上、React Native で開発しているアプリで、ScrollView 内の要素を上下左右中央寄せする方法でした。
ご参考になれば幸いです。