React NativeでAndroidアプリのキーボード表示時のフラッシュ問題を解決する方法

React Nativeで開発されたAndroidアプリでは、キーボードが表示される際に背景が一瞬フラッシュして白くなるという問題がしばしば発生します。特にダークモードを使用している時や、アプリに特定の背景色を設定している場合、この白いフラッシュは非常に目立ち、ユーザー体験に悪影響を与えます。

この問題の原因は、キーボード表示時のデフォルトのウィンドウ調整動作にあります。React Nativeでは、キーボードが表示されると画面のレイアウトが自動的に調整され、このプロセス中に背景が一瞬白くなることがあります。

解決策①

この問題に対処するための解決策はシンプルです。アプリの設定に応じて、適切なウィンドウ調整モードを指定することで、キーボード表示時のフラッシュを防ぐことができます。

Expoを使用している場合

Expoを使用している場合、app.jsonファイルに次の設定を追加します：

"android": {
    "softwareKeyboardLayoutMode": "pan",
    // その他のプロパティ
}

Expoを使用していない場合

Expoを使用していないネイティブのReact Nativeプロジェクトの場合、AndroidManifest.xmlに以下の属性をアプリの<activity>タグに追加します：

android:windowSoftInputMode="adjustPan"

解決策②

ExpoかつsoftwareKeyboardLayoutModeをresizeでやりたい場合は、ひと工夫が必要です。

パターン１app.jsonのandroid.backgroundColorに指定の値を入れる

パターン２（ダークモードなどで動的に背景を変えたい場合）expo-system-uiを使う

まとめ

以上。私は結局解決策②で対応しました。