【React Native】画像をキャッシュして表示するライブラリ「react-native-fast-image」

React Native でアプリを開発しているのですが、Android、iOS 共に画像の表示がいまいち遅い…という現象が発生していました。
で、代替えできるライブラリがないか調べたところ、「react-native-fast-image」というライブラリを発見しました！
早速導入してみましたが…かなりいい感じです！

GitHub のページはこちら。

GitHub – DylanVann/react-native-fast-image: 🚩 FastImage, performant React Native image component.
https://github.com/DylanVann/react-native-fast-image

導入て順は、まずライブラリのインストールを下記コマンドで行います。

npm install react-native-fast-image --save

// iOS の場合は下記も実行
npx pod-install

事前準備は以上です。

サンプルコードはこちら。
まず、ライブラリをインポートします。

import FastImage from 'react-native-fast-image'

render() の return() には下記のように追加します。

<FastImage
  style={{ width: 100, height: 100 }}
  source={{
    uri: '[画像パス]',
    headers: { Authorization: '[認証用トークン]' },
  }}
  />

必要最低限のコードは以上です！

source プロパティの指定方法については、React Native の <Image /> コンポーネントと大体同じだったので、そこまで実装には手間取りませんでした。
なお、これ以外のオプションとして、画像の優先度やリサイズ方法、キャッシュの仕様などを設定することもできます。
ですが、これらは基本的にはデフォルト値のままで問題ないかと思います。
それ以外のプロパティについては、上の GitHub をご確認ください。

以上、React Native の画像をキャッシュして表示するライブラリ「react-native-fast-image」の実装についてでした。
正直、ここまで変わるのか！と思うくらい早くなったので、React Native 標準の <Image /> コンポーネントよりもおススメです。
同じことでお悩みの方の参考になれば幸いです。