【React Native】multilineのTextInputの入力開始位置を上揃えにする

毎回のように調べているので、いい加減に記事としてまとめます。
今回は、React Native の TextInput のレイアウトについてです。

TextInput に multiline を設定し、かつスタイルで高さも指定すると、よくある自由入力欄が作れるのですが、Android の場合、カーソルやプレースホルダーがその入力欄の上下中央に表示されます。
機能的には問題ないのですが、デザイン的に入力欄の中央にカーソルやプレースホルダーが表示されているとちょっと見栄えが悪かったのでこちらを上揃えになるように修正していきます。

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

React Nativeでmultilineの入力フィールドの入力開始位置を整える | ハックノート
https://hacknote.jp/archives/28149/

修正といっても、TextInput のスタイルに textAlignVertical: 'top' を追加するだけです！
サンプルコードはこちら。

import { TextInput, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  input: {
    height: 100,
    textAlignVertical: 'top',
    borderWidth: 1,
    borderColor: 'gray',
  },
});

<TextInput
  style={styles.input}
  multiline
  onChangeText={text => this.onChangeText(text)}
  value={this.state.text} />

上記のように実装したところ、高さ 100 でグレーの枠線に囲まれた入力欄が表示され、カーソルやプレースホルダーの位置も上揃えの状態になっていました！
これでOKですね！

なお、同じことを iOS でやる場合には textAlignVertical: 'top' は不要なのですが、逆に multiline の TextInput でカーソル及びプレースホルダーを入力欄の中央にしたい場合、まだ別の方法を使う必要があります。
というのも…iOS は、まさかの textAlignVertical: 'top' に対応していないのです…！
ということで、iOS で TextInput の中央にカーソル及びプレースホルダーを配置したい場合は、TextInput に alignSelf: 'center' を追加してください。
これで、TextInput の中央にカーソルやプレースホルダーが配置されるはずです！

以上、React Native で改行可能な TextInput の入力開始位置を上揃えにする方法についてでした。
ご参考になれば幸いです。