以前紹介した、「react-native-keyboard-accessory」ライブラリでソフトウェアキーボード上部に Done ボタンを設置したのですが、ノッチのある端末でのみ、その上部に余白ができることが判明しました。
動作に支障はないのですが、見た目がよろしくない…ということで、調査したところ、<SafeAreaView> が原因のようでした。
どうやら、画面下部のノッチの余白部分が悪さをしていたみたいでした。
ライブラリの導入等については、こちらの以前投稿した記事をご覧ください。
【React Native】「react-native-keyboard-accessory」でiOSのソフトウェアキーボードの上にDoneボタンを設置する
https://cpoint-lab.co.jp/article/202106/20321/
さて、プロジェクトには react-navigation ライブラリを導入しており、ページ下の余白を調節すれば、<SafeAreaView> をはずしても問題なかったため、最終的に下記のようなコードになりました。
import { ScrollView, View, Platform } from 'react-native';
import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory'
import { getBottomSpace } from 'react-native-iphone-x-helper';
<View style={{ flex: 1 }}>
<ScrollView contentContainerStyle={{ paddingBottom: getBottomSpace(), }}>
......
</ScrollView>
{ Platform.OS === 'ios' && <KeyboardAccessoryNavigation doneButtonTitle={strings.keyboardDone} avoidKeyboard androidAdjustResize nextHidden={true} previousHidden={true} />}
</View>
前回との違いは、<SafeAreaView> をはずして、<KeyboardAccessoryNavigation> の inSafeAreaView を削除している点です。
あとは、<ScrollView> の contentContainerStyle に paddingBottom: getBottomSpace() を追加し、ページ下部に、端末下部のノッチ分の余白を追加しています。
こちらを追加することで、ノッチありの端末で見た時に、一番下のページコンテンツが画面下にめり込む現象を防いでいます。
なお、<KeyboardAccessoryNavigation> は iOS の時のみ使用するようにしています。
Android の端末でも動作はしたのですが、iOS っぽいデザインの Done ボタンが Android のキーボードの上部にあることに凄く違和感があり、このようにしました。
こちらは個人的な好みなので、アプリのデザインなどによっては、Android でも Done を表示していてもいいと思います。
とりあえず、とにかく実際に Android と iOS の端末で動作確認をしてみるのをお勧めします！
以上、React Native の「react-native-keyboard-accessory」ライブラリを使ってキーボードの上部に追加した Done ボタンの上に余白ができる時の対処法についてでした。
ご参考になれば幸いです。
