Web では、position: fixed; を使用しているときに似たような問題が起こりましたが、React Native でもこの問題からは逃れられないのですね…。
ということで、今回は React Native で開発した iOS アプリで入力欄にフォーカスされた際、その入力欄がソフトウェアキーボードの後ろに隠れてしまうときの対処方法についてです。
なんと、React Native では既にその対処のためのコンポーネントが用意されておりました！
使用するコンポーネントは <KeyboardAvoidingView /> です。
公式サイトの該当ページはこちら。
KeyboardAvoidingView · React Native
https://reactnative.dev/docs/keyboardavoidingview
使用方法は、該当ページの要素をマルっと <KeyboardAvoidingView /> で囲ってしまえばOKです！
サンプルコードは下記のとおりです。
import { Platform, KeyboardAvoidingView } from '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"}
style={{ flex: 1 }}
keyboardVerticalOffset={offset}>
......
</KeyboardAvoidingView>
サンプルコードで唐突に getInset を使って何かの値を計算していますが、まずこちらについて解説です。
KeyboardAvoidingView の keyboardVerticalOffset にこの値を指定していますが、このオプションは、端末の画面の上部と React Native ビューの間の距離を指定できるものらしいです。
デフォルト値は 0 なのですが、最初そのままでシミュレーターや実機で動作確認をしてみたところ、ページが若干キーボードの後ろに隠れてしまったのでそれの対策です。
また、ノッチのあり・なしに影響されるようで、ノッチありの場合は 90、ノッチなしの場合は 65 が丁度いいようでした。
勿論検証は必要ですが、多分そのまま使えると思いますので併せてご利用ください。
若干の微調整は必要でしたが、それ以外は全く問題なく動作しました！
キーボードの後ろに隠れてしまう不具合はこれで解決です。
以上、React Native の iOS アプリで入力欄がキーボードの後ろに隠れてしまう不具合の対処方法についてでした。
ご参考になれば幸いです。
