【React Native】画像をポップアップで表示できるライブラリ「react-native-image-viewing」

以前に紹介した、複数画像をスライドショーで表示できるライブラリ「react-native-image-slider-box」とほぼ同時に導入したライブラリ「react-native-image-viewing」のご紹介です。
画像をタップすると、画像がポップアップで表示され、かつ複数枚の画像を指定すればその状態でスライド表示することができます。

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

GitHub – jobtoday/react-native-image-viewing: Tiny, purely TS, modal component for viewing images 🏙
https://github.com/jobtoday/react-native-image-viewing

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

npm install --save react-native-image-viewing

上記の実行が完了したら、プロジェクトの任意の場所で実装していきます。
まず、ライブラリをインポートし、表示したい画像を用意します。

import ImageView from "react-native-image-viewing";

const images = [
  { uri: "https://cpoint-lab.co.jp/wp-content/uploads/2019/07/cameraimgl9942_tp_v.jpg" },
  { uri: "https://cpoint-lab.co.jp/wp-content/uploads/2017/12/UNI_MONV15002722_TP_V.jpg" },
  { uri: "https://cpoint-lab.co.jp/wp-content/uploads/2017/12/iPhone8IMGL8492_TP_V.jpg" }
];

なお、画像を用意する際は、単に配列に代入するのではなく、上記のように一旦 Object に代入してから配列に格納するようにします。
ちなみにこのミスは既に私がやらかしました。

あとは、render の return() に下記を追加すれば実装は完了です。

<ImageView
  images={images}
  imageIndex={this.state.imageIndex}
  visible={this.state.isOpen}
  onRequestClose={() => this.setState({ isOpen: false })} />

ポップアップを表示するかどうかは state の isOpen で管理するようにしています。
また、imageIndex を指定すると、何番目の画像を表示するかを指定することができます。
特に指定がなければ 0 で問題ありませんが、例えば 3枚あるうちの 2枚目の画像を表示させたい！という場合は、1 を指定するようにしましょう。
なお、サンプルコードではこちらの値も state で管理するようにしています。

追加する項目は以上です。
他にも、ポップアップにヘッダーやフッターを追加できたり、背景色を指定できたりします。
詳しくは、GitHub のページをご参照ください。

以上、React Native で画像をポップアップで表示できるライブラリ「react-native-image-viewing」のご紹介でした。
ご参考になれば幸いです。