【React Native】キーボードで画面が隠れる場合の対処法

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay6です！

昨日は、RucksackというCSSライブラリを使ってレスポンシブタイポグラフィーを実装する方法についての記事でした。

Rucksackでレスポンシブタイポグラフィーを実装する

今回は、React Nativeで TextInput コンポーネントにフォーカスされたとき、ソフトウェアキーボードで画面が隠れてしまうのを防ぐ方法をご紹介します。

サンプルコードのReact Nativeのバージョンは 0.57.7です。

画面がキーボードで隠れてしまう状態とは

まずは下記のgif画像をご覧ください。

今回は、このように画面の中央に TextInput があり、画面下部に決定ボタンがあるレイアウトで説明していきたいと思います。

こちらの画面のコードは以下になります。
（キーボードの表示部分に関わらないスタイルは省略しています）

<View style={{ flex: 1 }}>
  <View style={{ height: 100 }}>
    <Text>Header</Text>
  </View>
  <View style={{ flex: 1 }} >
    <TextInput />
  </View>
  <TouchableOpacity style={{ height: 60 }}>
    <Text>Submit</Text>
  </TouchableOpacity>
</View>

ヘッダーと下部のボタンは高さ固定です。
TextInput がある中央の要素には flex プロパティを指定しており、高さが可変になっています。

このままだと、gif画像のように TextInput にフォーカスがあたったときに決定ボタンがキーボードで隠れてしまいます。

キーボードが表示された状態でも決定ボタンを隠さずに見せたいですよね。

それでは、キーボードが表示された状態でも決定ボタンが見えるようにする方法をご紹介します。

KeyboardAvoidingViewを使ってキーボードを避ける

React Nativeでキーボードによって画面が隠れるのを防ぐには、 KeyboardAvoidingView というコンポーネントを利用します。
https://facebook.github.io/react-native/docs/keyboardavoidingview

この KeyboardAvoidingView でキーボードによって隠れるのを避けたい要素を囲うだけです。

実際にコードを見てみましょう。

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
  <View style={{ height: 100 }}>
    <Text>Header</Text>
  </View>
  <View style={{ flex: 1 }} >
    <TextInput />
  </View>
  <TouchableOpacity style={{ height: 60 }}>
    <Text>Submit</Text>
  </TouchableOpacity>
</View>

ここでポイントになるのが、 behavior propsのプロパティです。
このプロパティの設定によって、キーボードを避ける際の動きが変わります。

behavior のプロパティに指定できるのは、以下の3つです。

• padding
• height
• position

それでは、それぞれプロパティを設定したときにどんな動きをするようになるのか、ご紹介します。

padding・height を設定した場合

behavior にpadding・heightを設定した場合は、以下のような動きになります。

flex を指定した真ん中の要素が、キーボードの出現に合わせて伸縮するようになりました。

それでは次に、positionを設定した場合について見ていきましょう。

positionを設定した場合

behavior にpositionを設定する場合は、 contentContainerStyle propsの設定もする必要があります。

<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior="position"
  contentContainerStyle={{ flex: 1 }}
>
  (省略)
</KeyboardAvoidingView>

behavior にpositionを設定すると、 KeyboardAvoidingView の中身が View コンポーネントで囲われるようになります。
contentContainerStyle propsには、その View に対するスタイルを指定します。

flex か heightを指定しないと、中身が潰れて見えなくなってしまうので注意が必要です。

この場合の挙動は以下のようになります。

padding・heightを指定したときとは違い、画面全体が上に押し上げられていますよね。

細かいスタイルを指定したいときなどは、 behavior にpositionを設定すると良いと思います。

まとめ

以上が KeyboardAvoidingView というコンポーネントを使用して、キーボードで画面が隠れるのを防ぐ方法でした。

キーボードで画面が隠れてしまって困っているときには、ぜひこの記事を参考に対応してみてください。