【React Native】複数枚の画像をお洒落に表示できるライブラリ「react-native-thumbnail-grid」

以前に見つけてからずっと使ってみたかったライブラリをアプリに実装したので、使い方についてまとめ。
「react-native-thumbnail-grid」という、複数枚の画像をまとめて表示できるライブラリです。

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

duyluonglc/react-native-thumbnail-grid
https://github.com/duyluonglc/react-native-thumbnail-grid

まず、ライブラリを下記のコマンドでインストールします。

npm install react-native-thumbnail-grid --save

あとは、下記のサンプルコードを参考にしてアプリに実装してください。

import PhotoGrid from 'react-native-thumbnail-grid';

const images = [
  {
    uri: '画像パス1',
    headers: {
      Authorization: 'Bearer ....'
    }
  },
  {
    uri: '画像パス2',
    headers: {
      Authorization: 'Bearer ....'
    }
  },
  {
    uri: '画像パス3'
    headers: {
      Authorization: 'Bearer ....'
    }
  }
];

this.showImage = (uri) => {
  // サムネイル画像をタップした時に実行したい処理を記述
}

<PhotoGrid
  source={images}
  onPressImage={(e, source) => this.showImage(source.uri)} />

サンプルコードは以上です。
なお、GitHub に掲載されているサンプルコードでは、onPressImage の指定方法が上記のコードとは異なりますが、GitHub の方の記述だと画像 URI が取得できませんでした。
Issue によると、正しい書き方は下記のとおりです。

/* 正 */
<PhotoGrid
  source={images}
  onPressImage={(e, source) => this.showImage(source.uri)} />

/* 誤 */
<PhotoGrid
  source={images}
  onPressImage={source => this.showImage(source.uri)} />

画像データは第二引数に格納されているので、そのように記述する必要があります。

使ってみた感想ですが、画像が読み込み中の時の代替画像があり、また枚数が増えても自動でレイアウトをいい感じに調整してくれるので、かなり使い勝手が良かったです！
個人的には 3枚以上の画像を一度に表示する時に向いていそうだと思いました。

以上、React Native で複数枚の画像をお洒落に表示できるライブラリ「react-native-thumbnail-grid」のご紹介でした。
ご参考になれば幸いです。