【React Native】ダイアログを表示するためのライブラリ「react-native-dialog」

タイトル通り、React Native でダイアログを表示するためのライブラリを導入したので、手順をまとめ。
Alert については、React Native もともと標準で装備されているのですが、入力欄のあるダイアログを使いたかったので、ライブラリを使うことにしました。

GitHub のページはこちらから。

GitHub – mmazzarolo/react-native-dialog: Pure JavaScript React-Native dialog
https://github.com/mmazzarolo/react-native-dialog

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

npm install react-native-dialog --save

完了したら早速実装していきます。
まず、ライブラリのインポートをするために、下記を追加します。

import Dialog from "react-native-dialog";

で、render 関数の return 内に下記を追加していきます。

<Button title="ダイアログ表示" onPress={() => this.setState({ isShowNameDialog: !this.state.isShowNameDialog })} />
<Dialog.Container visible={this.state.isShowNameDialog}>
  <Dialog.Title>入力欄のあるダイアログ</Dialog.Title>
  <Dialog.Input placeholder='名前' />
  <Dialog.Button label="OK" bold={true} onPress={() => this.setState({ isShowNameDialog: !this.state.isShowNameDialog })} />
  <Dialog.Button label="キャンセル" onPress={() => this.setState({ isShowNameDialog: !this.state.isShowNameDialog })} />
</Dialog.Container>

ダイアログの表示/非表示は、state の isShowNameDialog で管理しています。
初期値は false にしています。
で、「ダイアログ表示」というボタンをタップすると、ダイアログが表示されるようにしています。

追加するコードは以上です！
最初、<Dialog.Container> に visible の値を指定し忘れて表示されないというポカをやらかしましたが、それ以降は特に大きく躓くこともなく実装出来ました。
見た目も、OS 標準のシンプルなダイアログなので、アプリの画面とも喧嘩しなくていい感じです。

以上、React Native でダイアログを表示できるライブラリ「react-native-dialog」のご紹介でした。
ご参考になれば幸いです。