search
LoginSignup
3

More than 3 years have passed since last update.

posted at

Organization

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3