【ReactNative】AndroidとiOSではキーボードが開いた時の挙動が違う

※タイトルにRNとかいてますが、おそらくRNに関係ない話だと思います。多分。

ReactNativeを使ってて、キーボードが開いた時の挙動がOS間で違うのでは?と思って調べてみたらやっぱりそうだった、という話。

どっかに書いてるかな、と思ったけど見つけられなかったのでここに書き残す。

結論どう違うのか

なにがどう違うかというのをアニメGIFで撮ったので貼ります。

(追記: いらんとは思うけどコードあげました。 GitHub - uutarou10/rn-view-height-test )

(width/heightのラベルはそれぞれが100%に指定してある親Viewの値です)

キーボードの分、Viewが縮むのがAndroidの挙動で、そうではないのがiOSの挙動です。

なので、キーボードが開いた時にキーボードの下に要素が隠れないようにするとか、そういうものを作ろうとするとちょっと工夫する必要が出てきます。

Androidのキーボードが開いた時の挙動はAndroidManifest.xmlというファイルにあるandroid:windowSoftInputModeという値で設定されているようです。(この辺、Android開発者ではないのでかなり怪しめです。)

react-native-cliで作ったアプリは、この値が最初adjustResizeになっています。(ちなみにAndroidManifest.xmlはRNの場合、android/app/src/main/AndroidManifest.xmlにあります)

こちらのページに書いていますが、この値をadjustPanにすると、フォーカス位置が隠れないように画面をズラしてくれます。

adjustPanに設定した場合の挙動はこうなります。

ただ、画面をズラしてくれると書いたように、Inputがキーボードが出る位置の下にある場合、フォーカスが当たると全体的に画面がズレます。

当然画面上にある要素は見えなくなってしまうので、実際に使うには注意が必要です。

実際、先ほどのAndroid公式のドキュメントには、

一般にこの方法はサイズ変更に比べると望ましくありません。ユーザーがソフトキーボードを閉じて、ウィンドウの隠れた部分を操作する必要が生じる可能性があるためです。

と書いています。

じゃあお前どうすりゃええねん、という話はまた調査して書こうかなと。