@roman.sytnyk/react-native-image-cache-dynamic-link v2.1.5

React Native Image Cache on File System with Progressive Loading with Dynamic Links (Amazons S3 and etc.)

Fork of:

• georstat/react-native-image-cache

Inspired by:

• wcandillon/react-native-expo-image-cache (William Candillon)
• WrathChaos/react-native-progressive-fast-image (FreakyCoder)

Features

A fork of @georstat/react-native-image-cache with a usage of a link without params as a caching key! Could be useful for caching images from Amazon S3 and similar sources.

• Cache remote images in file system with progressive loading
• Uses react-native-file-access for file system access
• Written in Typescript
• Uses react-native-reanimated for animations

Caution:

If you're not using react-native-reanimated version 2.x.x then use version 1.x.x of this module

If you're looking for an image library with thumbnails visit @georstat/react-native-image-gallery

Preview

iOS:

Android:

Custom Loading Image Component: (see example)

Installation

yarn:

yarn add @georstat/react-native-image-cache

npm:

npm i @georstat/react-native-image-cache

link native packages:

 cd ios
 pod install

**note!

For react native >= 0.65 use react-native-file-access >= 2.0.0

Usage

Put this Global config on your app entry eg. App.tsx or index.js (Required):

import { CacheManager } from '@georstat/react-native-image-cache';
import { Dirs } from 'react-native-file-access';

CacheManager.config = {
  baseDir: `${Dirs.CacheDir}/images_cache/`,
  blurRadius: 15,
  cacheLimit: 0,
  sourceAnimationDuration: 1000,
  thumbnailAnimationDuration: 1000,
};

cacheLimit config: (auto pruning of cached files)

If cacheLimit is set to 0 (default value) then the cache will never be auto pruned. This setting accepts a number of Bytes eg. 1024 * 1024 * 256(~256MB) and requires react-native-file-access >= 2.4.0, if you're using < 2.4.0 then leave the default value 0 (disabled).

Cache pruning flow:

1. Get all files from baseDir.
2. Sort them by lastModified, oldest first.
3. Get total size in Bytes by using reduce array method.
4. Check total size from step 3 and subtract cacheLimit value.
5. Run a while loop and keep deleting files so long as the current cache size (step 4) is larger than the size required to trigger cache pruning (cacheLimit value).
6. All steps above will run only if the image is not already cached, it runs after downloading a new image into the cache.

Pruning has been benchmarked on iOS simulator with a 5.7MB image and ~5.000 copies of it on cache without any issues. Please note that the pruning speed/performance might differ among devices. Use cacheLimit wisely and do not set a big value.

If you want to run your own tests on simulator then the cached images are stored in this location on a Mac: /Users/<your_name>/Library/Developer/CoreSimulator/Devices/<simulator_device_id>/ data/Containers/Data/Application/<application_id>/Library/Caches/images_cache, just copy and paste multiple images in there, there's no need to download them via the app.

Directory constants, choose wisely: (react-native-file-access docs)

• Dirs.CacheDir
• Dirs.DatabaseDir (Android only)
• Dirs.DocumentDir
• Dirs.LibraryDir (iOS only)
• Dirs.MainBundleDir
• Dirs.SDCardDir (Android only)
  • Prefer FileSystem.cpExternal() when possible.

Component:

import { CachedImage } from '@georstat/react-native-image-cache';

<CachedImage
  source="https://via.placeholder.com/3500x3500"
  style={{ height: 350, width: 150 }}
  thumbnailSource="https://via.placeholder.com/350x150"
/>;

Prefetch Image(s) and store them in cache:

Accepts 2 parameters:

import { CacheManager } from '@georstat/react-native-image-cache';

const url = "https://..../image.jpg"

const urls = ["https://..../image.jpg", "https://..../image2.jpg", "https://..../image3.jpg"]

 CacheManager.prefetch(url); // prefetch single image

 CacheManager.prefetch(urls); // prefetch mutliple images

Clear local cache:

import { CacheManager } from '@georstat/react-native-image-cache';

await CacheManager.clearCache();

Remove single cache entry:

const uri = 'https://.../example.jpg';

await CacheManager.removeCacheEntry(uri);

Get local cache size:

await CacheManager.getCacheSize();

Check if image is cached:

await CacheManager.isImageCached(uri);

Props

CachedImage accepts the following props:

More info about React Native Accessibility

Blog Article about React Native Accessibility

Todo:

• Convert library to React Hooks
• Make baseDir configurable
• Delete single cache entry

Authors:

• Efstathios Ntonas
• George Bakogiannis
• George Kallinikos