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

経緯（愚痴）

react-native-fast-image | Voters | Expo

You can try it out today: Create a new project: Install the packages: expo install react-native-fast-image expo-dev-client In the cloud with eas build -p all --profile development ( does not support custom builds) Or locally with and (note: see https://expo.fyi/prebuild-cleanup for information on the generated files) To be clear, will not have been added to the Expo Go app that you download from the App Store or Google Play Store.

https://expo.canny.io/feature-requests/p/react-native-fast-image

react-native-expo-cached-image

Cached image component for Expo's managed workflow yarn add react-native-expo-cached-image The CachedImage component downloads the image to the user's local filesystem using a deterministic hash of the URI as the path key. If the image is already downloaded, it will be rendered without re-downloading.

https://www.npmjs.com/package/react-native-expo-cached-image

Asset Caching - Expo Documentation

This section covers all things related to loading assets in your apps, from bundling with an app binary, to caching, pre-loading and publishing. Bundling assets into your binary will provide for the best user experience as your assets will be available immediately.

https://docs.expo.dev/guides/preloading-and-caching-assets/

expo-cached-imageの使い方

GitHub - echowaves/expo-cached-image: Super fast cached image component for react-native applications powered by expo

Super fast cached image component for react-native applications built with expo yarn add expo-cached-image or expo install expo-cached-image Then it can be referenced in code like this: internally uses the component from 'react-native', so any properties that apply to the can be passed into the . cacheKey is the only property that's specific.

https://github.com/echowaves/expo-cached-image#readme

インストール

yarn add expo-cached-image

使い方

<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タグにそのまま渡されます
/>