【React Native】「react-native-keyboard-accessory」でiOSのソフトウェアキーボードの上にDoneボタンを設置する

タイトル通り、「react-native-keyboard-accessory」ライブラリを導入し、iOS　のソフトウェアキーボードの上に Done　ボタンを追加する方法についてです。
現在開発しているアプリで、この機能が欲しいとのご要望があり、実装しました。

「react-native-keyboard-accessory」ライブラリの GitHub はこちらから。

GitHub – ardaogulcan/react-native-keyboard-accessory: A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.
https://github.com/ardaogulcan/react-native-keyboard-accessory

ライブラリのインストールは下記コマンドで行います。

npm install react-native-keyboard-accessory --save

準備はこれでOKです。

あとは、実装したいページに下記を追加すれば完了です。

import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory';

<SafeAreaView>
  ......
  <KeyboardAccessoryNavigation 
    doneButtonTitle='OK'
    avoidKeyboard androidAdjustResize
    inSafeAreaView={true}
    nextHidden={true} previousHidden={true} />
</SafeAreaView>

実際の端末のスクリーンショットはこちら。

なお、ページに <KeyboardAvoidingView> を使用している場合は削除してください。
私の環境で、<KeyboardAvoidingView> と <KeyboardAccessoryNavigation> を併用した状態で実行したら、ソフトウェアキーボードと完了のボタンの間に、かなりスペースができてしまいました。
iOS の場合、<KeyboardAvoidingView> を追加しないと、ページのコンテンツがソフトウェアキーボードの後ろに隠れてしまう不具合が発生しますが、<KeyboardAccessoryNavigation> を使用する場合は avoidKeyboard を追加すれば、キーボードが表示されても、ページ下部にあるコンテンツは隠れませんでした。

また、iPhoneX 以降のノッチのあるデバイスに対応させる場合は、inSafeAreaView={true} も追加してください。
これを指定しないと、やっぱり完了ボタンとキーボード間に絶妙なスペースができて不恰好なので、絶対ノッチのある端末は使用しない！という場合以外は、この設定を追加しておいた方が無難だと思います。

あとは今回は使わなかった、前へ戻る/次へ進むボタンを非表示にしています。
実装する内容は以上です！

ちなみに、こちらのコードはまだ Android では未検証です。
何か不具合が発生した場合は、その都度修正します。

以上、React Native で、iOS のソフトウェアキーボードの上部に Done ボタンを追加する方法についてでした。
ご参考になれば幸いです。