【React Native】iOSでダイアログ下部のボタンがキーボードに隠れる

こちらの対応にかなり手こずったので、備忘録としてまとめ。
React Native で、「react-native-dialog」ライブラリを使って、入力欄のあるダイアログを表示した際、キーボードの後ろに、OK やキャンセルボタンが隠れてしまう時の対処法です。
特に、iPhone 7 など、画面が小さい端末で見てみるとよくわかります。
なお、Android では再現せず、iOS でだけ発生します。
…Cordova でアプリを開発しているときにも思ったのですが、何故 iOS はキーボードが画面に重なるように表示されるのでしょう…。
個人的には、Android のように、キーボードの高さ分だけ画面の高さが低くなって欲しいものです。

さて、対処法ですが、「react-native-dialog」の GitHub の Issues に非常に参考になる投稿がありました！

Dialogue Buttons are covered by Keyboard · Issue #38 · mmazzarolo/react-native-dialog · GitHub
https://github.com/mmazzarolo/react-native-dialog/issues/38

上記によると、<Dialog.Container> に、contentStyle={{ marginBottom: 45 }} を追加するだけでOKとのことでした。
サンプルコードは下記の通りです。

<Dialog.Container
  contentStyle={{ marginBottom: 45 }}>
  ......
</Dialog.Container>

…これだけ？と思いましたが、実際に上記を追加してアプリで挙動を確認してみたところ、確かにダイアログ下部の OK とキャンセルボタンがスムーズに押せるくらい、ダイアログ全体が上に上がっていました！
シミュレーター の iPhone 7 と iPhone 11 で確認してみましたが、どちらもスムーズにダイアログのボタンを押すことができました。
しかも、キーボードが表示されていない時は、ダイアログは端末の画面中央に表示されており、違和感はありませんでした。

なお、Android で動作させることも考え、最終的なコードは下記のようになりました。

<Dialog.Container
  contentStyle={{ marginBottom: Platform.OS === 'android' ? 10 : 45 }}>
  ...
</Dialog.Container>

実機で確認しながら調整したところ、上記のようにするとちょうど良さそうでした。

最初は自力でやろうとして <KeyboardAvoidingView> を追加したりしていましたが…当たり前ですが調べた方が早いし確実でしたね。

以上、React Native の「react-native-dialog」ライブラリを使ってダイアログを表示した時、iOS でダイアログの下部にあるボタンがキーボードに隠れてしまう時の対処法でした。
ご参考になれば幸いです。