【React Native】複数の画像をグリッド表示できるライブラリ「react-native-grid-list」

先日、「【React Native】複数枚の画像をお洒落に表示できるライブラリ「react-native-thumbnail-grid」」という記事で「react-native-thumbnail-grid」ライブラリをご紹介しましたが、類似のライブラリを見つけていたのでこちらもご紹介。

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

gusgard/react-native-grid-list: 🌁 Grid list component implemented with FlatList
https://github.com/gusgard/react-native-grid-list

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

npm install react-native-grid-list --save

インストールが完了したら、下記のサンプルコードを参考に、実装したいプロジェクトにコードを追加してください。

import { Image } from 'react-native';
import GridList from 'react-native-grid-list';

const items = [
  { thumbnail: { uri: 'https://lorempixel.com/200/200/animals' } },
  { thumbnail: { uri: 'https://lorempixel.com/200/200/city' } },
  { thumbnail: { uri: 'https://lorempixel.com/200/200/nature' } },
  { thumbnail: { uri: 'https://lorempixel.com/200/200/cats' } },
];

<GridList
  showSeparator
  data={items}
  numColumns={3}
  renderItem={({ item, index }) => (
    <Image key={index} source={item.thumbnail} />
  )} />

サンプルコードは以上です。

上記を実行したところ、問題なく画像が Grid 表示されましたが、こちらのライブラリは FlatList を使っているため、ScrollView を使用しているページとは相性が悪く…結局「react-native-thumbnail-grid」ライブラリの方を使うことにしました。
しかし、1行に表示する画像の数を指定できるし、画像間に区切りを入れるかどうかを指定できるし、かなりカスタマイズ性の高いライブラリだと思います。
ScrollView を使っていないページであればこちらの導入を検討してもいいと思います！

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