浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】AndroidのみKeyboardAvoidingViewを無効にする

先日、「iOSで入力欄がキーボードの後ろに隠れてしまう時の対処法」についての記事を投稿しましたが、こちらを Android 端末で実行したところ見事にバグったのでその修正方法についてです。

KeyboardAvoidingView についての公式サイトのリンクはこちら。

KeyboardAvoidingView · React Native
https://reactnative.dev/docs/keyboardavoidingview

で、この問題を修正するのに参考にさせていただいた記事がこちら。

Android で React Native の KeyboardAvoidingView の behavior を指定すると、逆に Input がキーボードに隠れてしまう – idubmorganのブログ
https://dev-dub.hatenablog.com/entry/2019/02/02/121229

 

まず、React Native の公式サイトを参考にして、最初に書いていたコードがこちら。

import { getInset } from 'react-native-safe-area-view';

const bottomPadding = getInset('bottom', false);
const offset = bottomPadding > 0 ? 90 : 65;
<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : "height"}
  keyboardVerticalOffset={offset}
  style={{ flex: 1 }}>
  ......
</KeyboardAvoidingView>

iOS では問題なく動作するのですが、同じコードで Android アプリを起動したところ、キーボード表示時に高さが変わったページとキーボードとの間に隙間が空いてしまったり、逆に中途半端に入力欄が隠れてしまったりしました。
また、テキストを入力して入力候補が表示されると、完全に入力欄が隠れてしまうという状況に…。

で、対処方法としては、Android の時は、behavior の値を null にすると理想通りの動作になりました!
変更後のコードはこちらです。

<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : null}
  keyboardVerticalOffset={offset}
  style={{ flex: 1 }}>
  ......
</KeyboardAvoidingView>

公式のサンプルコードをそのまま鵜呑みにしてしまっていたのがダメでした…。
というか、behavior に指定する値って、heightpositionpadding だけではなく、null でも良いんですね。知りませんでした…。

ちなみに、この方法を知るまで、keyboardVerticalOffset の値を変えてみたり、enabled を、Android の時のみ false にして、KeyboardAvoidingView を無効にしてみたりもしたのですが…どれもダメでした。
皆さんは素直に behaviornull を指定してください。

 

以上、React Native の KeyboardAvoidingView を Android でのみ無効にする方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)