RNFileCache

Caching files to disk in react-native apps

Installation

This package depends on rn-fetch-blob. First install it.

npm i @mutagen-d/react-native-file-cache
// or
yarn add @mutagen-d/react-native-file-cache

Usage

• first load files from disk

await RNFileCache.load()

• then get file path from url or download file

if (RNFileCache.exists(url)) {
  const filepath = RNFileCache.getPath(url)
} else {
  const file = await RNFileCache.download({ url })
  const filepath = file.path
}

• lock file to prevent from removing

RNFileCache.lock("<lock id>", filepath)

• unlock file when needed

RNFileCache.unlock("<lock id>")

• enable logger, see js-logger

import { Logger } from "react-native-file-cache"
Logger.setLevel(Logger.DEBUG)

API

| Method | Return type | Description | | ----------------------------------------- | ----------- | -------------------------------------------------------------------------- | | maxSize | number | maximum size of cached files, defaults 512 MiB | | totalSize | number | current size of cached files | | load() | | loads files from cache | | exists() | boolean | return if file exists in cache | | getPath() | string | get file path, regardless of whether file exists or not * | | download() | File | download file | | cancelDownload() | | cancel active download, partially downlaoded file will be removed | | pruneCache() | | removes old files if cache size is reached maxSize | | setClearingRatio() | | set size of cache that will be removed when pruning cache, defaults 0.15 | | getClearingRatio() | number | | | lock() | | locks file from being deleted | | unlock() | | unlock locked file | | remove() | | removes file by url | | removeFile() | | removes file by path | | isRemoving() | boolean | | | onRemoved() | | set listener on file remove | | removeAll() | | removes all files from cache |

* If file doesn't exist and url doesn't contain extension part, then getPath(url) returns filepath without file extension. If file exists, then getPath(url) returns filepath with file extension, even when url does not contain extension part

load

console.log(RNFileCache.isReady()) // `false`
await RNFileCache.load()
console.log(RNFileCache.isReady()) // `true`

exists

const exists = RNFileCache.exists("https://example.com/image.png")

getPath

const path = RNFileCache.getPath("https://example.com/image.png")

download

try {
  const file = await RNFileCache.download({
    method: "GET",
    url: "https://example.com/image.png",
    headers: {
      Authorization: "Bearer <token>",
    },
    onProgress: (loaded: number, total: number) => {
      console.log("progress", loaded / total)
    },
    onLoad: (file: File) => {
      console.log("file", file)
    },
    onError: (error: any) => {
      console.log("error", error)
    },
    onLoadEnd: () => {},
    onCancel: () => {
      console.log("file downloading canceled")
    },
  })
} catch (e) {
  console.log("error", e)
}

cancelDownload

await RNFileCache.cancelDownload("https://example.com/image.png")

setClearingRatio

RNFileCache.setClearingRatio(0.4)
RNFileCache.pruneCache()

assert(RNFileCache.totalSize <= RNFileCache.maxSize * 0.6)

lock

const lockId1 = "<id1>"
const lockId2 = "<id2>"
RNFileCache.lock(lockId1, file.path)
RNFileCache.lock(lockId2, file.path)
// file is not deleted untill `unlock` it
await RNFileCache.removeFile(file.path)

unlock

RNFileCache.unlock("<id1>")
RNFileCache.unlock("<id2>")

remove

await RNFileCache.remove("https://example.com/image.png")

removeFile

await RNFileCache.removeFile(file.path)