Expoの画像キャッシュにexpo-cached-imageを使ったらいい感じだった

date
Jul 14, 2022
slug
about-expo-cached-image
status
Published
summary
Expoの画像キャッシュにexpo-cached-imageを使ったらいい感じだった
type
Post
ステータス

経緯(愚痴)

expoでReact NativeのFastImage的な感じでキャッシュ管理をしたかったが、expoのvotersによると、現状だとFastImageはexpo単体では対応しておらず、custom dev clientに対応する必要があり、明確にサポートしない旨がカルロス氏によって明言されてました。
 
そのほかキャッシュ系だとreact-native-expo-cached-imageというライブラリがそれっぽかったけど、かなり古くてメンテもされてなさそう。。。
 
公式によると、Image.prefetchを使って画像を保存しておくような実装が推奨されているらしいけど、ちょっと面倒だし、期限やユニークキーの設定についての記載は無い様子。。。
 
色々と探した結果、新しめで理想的な expo-cached-imageというライブラリを見つけたので、ご紹介がてらメモ。

expo-cached-imageの使い方

 

インストール

yarn add expo-cached-image
 

使い方

こんな感じで、キャッシュ用のキーとsourceを指定するだけ。
<CachedImage
  source={{  uri: `${item.imageURL}` }}
  cacheKey={`${item.id}-thumb`} // データのIDなど。URLでも。
/>
 
色々設定する例
import CachedImage from 'expo-cached-image'
...

<CachedImage
  source={{ 
    uri: `${item.getThumbUrl}`, // 画像のURL
    headers: `Authorization: Bearer ${token}`, // (任意、リクエストヘッダ)
    expiresIn: 604800, // (任意、1週間を秒数で)
  }}
  cacheKey={`${item.id}-thumb`} // データのIDなど。URLでも。
  placeholderContent={( // (任意、読み込み中のプレイスホルダー)
    <ActivityIndicator
      size="small"
      style={{
        flex: 1,
        justifyContent: "center",
      }}
    />
  )} 
  resizeMode="contain" // Imageタグにそのまま渡されます
  style={styles.photoContainer} // Imageタグにそのまま渡されます
/>
 
数年前に使ってたFastImageを思い出した。簡単だった。

© わくてか 2022