【React Native】「react-native-image-viewing」ライブラリで表示する画像にキャッシュの設定を追加する

以前アプリに導入した「react-native-image-viewing」という画像をプレビュー表示できるライブラリについてです。
画像の表示がたまにすごく遅いので、何とかならないか…と調査したところ、キャッシュの設定ができるとのことで導入してみました。

参考にしたのは下記の Issue です。

Expose the cache prop of Image · Issue #39 · jobtoday/react-native-image-viewing
https://github.com/jobtoday/react-native-image-viewing/issues/39

こちらによると、images で画像の URI を渡す際に、cache: "force-cache" を追加すればいいとのことでした。
サンプルコードは下記のとおりです。

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

const images = [
  {
    uri: "表示したい画像パス1",
    cache: "force-cache",
  },
  {
    uri: "表示したい画像パス2",
    cache: "force-cache",
  },
  {
    uri: "表示したい画像パス3",
    cache: "force-cache",
  },
];

const [visible, setIsVisible] = useState(false);

<ImageView
  images={images}
  imageIndex={0}
  visible={visible}
  onRequestClose={() => setIsVisible(false)} />

変数 images に格納されている画像パスの配列データに cache: "force-cache" をそれぞれ追加しています。

実際に、Android 端末で実行したところ、2回目以降の表示速度が改善されたように思います！
後ほど iOS でも確認します。

以上、React Native の「react-native-image-viewing」ライブラリで表示する画像にキャッシュの設定を追加する方法についてでした。
ご参考になれば幸いです。