【React Native】TextInputでAndoirdのみ縦方向の中央寄せができない

1790 ワード
reactnative Android react-native Android テキストリンク

前提

  • React Native 0.62.2

問題

  • TextInputコンポーネントでカスタムフォントを適用した際、Androidのみ入力したテキストの下方に謎のpaddingが出現する

↓左がiOS、右がAndroid
※わかりやすくするため、TextInputの背景をグレーにしている。

解決方法

  • TextInputのstyleに includeFontPadding: false を追加する

  • ちなみに、色々調べると、多かったのは以下のパターンのいずれかの組み合わせだが、いずれもうまくいかなかった。

style = {
  padding:0,
  paddingVertical: 0,
  margin: 0,
  textAlignVertical: 'center',
}

参考文献