KeyboardAvoidingViewがキーボードを避けてくれないとき

これを

こうしたい

が、TextInputがソフトキーボードに隠れてしまう時がある。

前提

react-navigationなどを使ってヘッダーとStatusBarを表示している

解決法

ヘッダーとStatusBar分のサイズをKeyboardAvoidngViewのkeyboardVerticalOffsetというプロパティで指定する。

import { Header } from 'react-navigation'
import { StatusBar } from 'react-native'

<KeyboardAvoidingView
  style={styles.textInputView}
  behavior='padding'
  keyboardVerticalOffset={Header.HEIGHT + StatusBar.currentHeight}
>

iOSの場合の対応

iOSの場合、 StatusBar.currentHeight の値は undefined になってしまうので、上記のようにするとキーボードに隠れてしまう。iOSの場合、StatusBarの高さの論理値は20と決まっているので、それを指定する。またiPhoneXの場合はノッチを加味すると44になる。

参考: https://www.npmjs.com/package/react-native-status-bar-height