【React Native】複数画像をスライドショーで表示できるライブラリ「react-native-image-slider-box」

React Native のアプリに画像のスライドショー機能を実装したくて検索していたら、私のイメージ通りのライブラリを発見できたのでまとめ。
実装も簡単だし、レイアウトも調整しやすかったのでかなりお勧めです。

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

GitHub – intellidev1991/react-native-image-slider-box: A simple and fully customizable React Native component that implements an Image Slider UI.
https://github.com/intellidev1991/react-native-image-slider-box

ライブラリのインポートコマンドはこちら。

npm install react-native-image-slider-box --save

上記のコマンドの実行が完了したら、プロジェクトに実装していきます。

import { SliderBox } from "react-native-image-slider-box";

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

画像のスライドショー機能を使いたいファイル内に上記を追加し、ライブラリをインポートします。
スライドショー表示したい画像は、上記のように配列で持ちます。

あとは、render() の return 内に下記を追加するだけ！

<SliderBox images={images} dotColor="red" inactiveDotColor="gray" />

なお、上記のサンプルでは、ナビゲーションのドットを表示している場所は赤色に、それ以外は灰色に指定しています。
他にも、スライドショーの高さを変更できたり、表示する画像のリサイズ方法を変更したり、ループさせたり、自動で次の画像にスライドさせたりすることができます。
ちなみに、デフォルトのスライドショーの高さは 200 で、画像のリサイズ方法は cover です。

細かいレイアウトの指定をしなければ、このように短いコードで済むのはいいですね！
特に、ナビゲーションドットの色指定が簡単だったのが嬉しいです。

以上、React Native で画像のスライドショー機能を実装できるライブラリ「react-native-image-slider-box」のご紹介でした。
ご参考になれば幸いです。