{"id":16764915,"url":"https://github.com/wcandillon/react-native-img-cache","last_synced_at":"2025-04-08T09:10:23.509Z","repository":{"id":17409745,"uuid":"81353166","full_name":"wcandillon/react-native-img-cache","owner":"wcandillon","description":"Image Cache for React Native","archived":false,"fork":false,"pushed_at":"2020-06-15T12:33:15.000Z","size":65,"stargazers_count":730,"open_issues_count":47,"forks_count":143,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-14T10:00:38.576Z","etag":null,"topics":["cache","image","react-native"],"latest_commit_sha":null,"homepage":"https://hackernoon.com/image-caching-in-react-native-96d8df33ca84","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wcandillon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-08T16:56:55.000Z","updated_at":"2024-03-04T08:16:18.000Z","dependencies_parsed_at":"2022-08-24T17:51:00.837Z","dependency_job_id":null,"html_url":"https://github.com/wcandillon/react-native-img-cache","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wcandillon%2Freact-native-img-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wcandillon%2Freact-native-img-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wcandillon%2Freact-native-img-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wcandillon%2Freact-native-img-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wcandillon","download_url":"https://codeload.github.com/wcandillon/react-native-img-cache/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809964,"owners_count":20999816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cache","image","react-native"],"created_at":"2024-10-13T05:27:42.060Z","updated_at":"2025-04-08T09:10:23.480Z","avatar_url":"https://github.com/wcandillon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Image Cache\n\n[![CircleCI](https://circleci.com/gh/wcandillon/react-native-img-cache.svg?style=svg)](https://circleci.com/gh/wcandillon/react-native-img-cache)\n[![npm version](https://badge.fury.io/js/react-native-img-cache.svg)](https://badge.fury.io/js/react-native-img-cache)\n\nCachedImage component and Cache image manager for React Native.\n\n## Deprecated\n\n**I am no longer maintaining this library but [react-native-expo-image-cache](https://github.com/wcandillon/react-native-expo-image-cache) which depends on ExpoKit.**\n\n**Checkout [5 things to know about Images in React Native](https://medium.com/@wcandillon/5-things-to-know-about-images-react-native-69be41d2a9ee)**\n\n## Why do I need this?\nStarting version `0.43`, the React Native [Image component](https://facebook.github.io/react-native/docs/image.html) has now a cache property: `cache: force-cache` (iOS only). This is a major improvement but only for iOS and at this time, I wasn't able to use it in a way that provides a user experience as smooth as this module.\n\n## Installation\n\n### rn-fetch-blob\nThis package has a dependency with [rn-fetch-blob](https://github.com/joltup/rn-fetch-blob).\nIf your project doesn't have a dependency with this package already, please refer to [their installation instructions](https://github.com/joltup/rn-fetch-blob#user-content-installation).\n\n```bash\nnpm install react-native-img-cache --save\n```\n\n## Usage\n\n### CachedImage\n\nThe `CachedImage` component assumes that the image URI will never change. The image is stored and served from the application cache. This component accepts the same properties than `Image` except for a few difference:\n* `source` doesn't accept an array of image URIs like `Image` does. Please file an issue if that's something you would like to see supported.\n* The `uri` property in `source` is mandatory.\n* The `body` property in `source` is not supported. Please file an issue if that's something you would like to see supported.\n\n```jsx\nimport {CachedImage} from \"react-native-img-cache\";\n\n\u003cCachedImage source={{ uri: \"https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg\" }} /\u003e\n```\n\nThe `mutable` property implies assumes that the image URI can change over time. The lifetime of this cache is the one of the running application and it can be manually busted using `ImageCache`.\n\n```jsx\nimport {CachedImage} from \"react-native-img-cache\";\n\n\u003cCachedImage source={{ uri: \"https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg\" }} mutable /\u003e\n```\n\n### Custom Image Component\n\nBy default, the `CachedImage` component is using the [standard RN Image component](https://facebook.github.io/react-native/docs/image.html).\nIt is possible however to use a different component via `CustomCachedImage`. In the example below, we use the `Image` component from [react-native-image-progress](https://github.com/oblador/react-native-image-progress).\n\n```jsx\nimport {CustomCachedImage} from \"react-native-img-cache\";\n\nimport Image from 'react-native-image-progress';\nimport ProgressBar from 'react-native-progress/Bar';\n\n\u003cCustomCachedImage\n  component={Image}\n  source={{ uri: 'http://loremflickr.com/640/480/dog' }} \n  indicator={ProgressBar} \n  style={{\n    width: 320, \n    height: 240, \n  }}/\u003e\n```\n\n### ImageCache\n\n#### clear()\n\nRemove cache entries and all physical files.\n\n```js\nImageCache.get().clear();\n```\n\n#### bust(uri)\n\n`ImageCache` can be used to bust an image from the local cache.\nThis removes the cache entry but it **does not remove any physical files**.\n\n```js\nImageCache.get().bust(\"https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg\");\n```\n\n#### cancel(uri)\n\nIt can also be used to cancel the download of an image. This can be very useful when [scrolling through images](https://medium.com/@wcandillon/image-pipeline-with-react-native-listview-b92d4768b17c).\n\n```js\nImageCache.get().cancel(\"https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg\");\n```\n\n#### on(uri, observer, immutable)\n\nThe `ImageCache` class can register observers to the cache.\n\n```js\nconst immutable = true;\nconst observer = (path: string) =\u003e {\n    console.log(`path of the image in the cache: ${path}`);\n};\nImageCache.get().on(uri, observer, immutable);\n```\n\nWe use the observer pattern instead of a promise because a mutable image might have different version with different paths in the cache.\n\n#### dispose(uri, observer)\n\nObservers can be deregistered using `dispose`:\n\n```js\nImageCache.get().dispose(uri, observer);\n```\n\n## Testing with jest\n\n### Mocking CachedImage\n\nWith jest, testing a snapshot can generate errors. Jest doesn't know how to generate the component CachedImage. For fix this, you have to mock CachedImage with Image component.\n\n```js\njest.mock('react-native-img-cache', () =\u003e {\n  const mockComponent = require('react-native/jest/mockComponent')\n  return {\n    CustomCachedImage: mockComponent('Image'),\n    CachedImage: mockComponent('Image'),\n  }\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwcandillon%2Freact-native-img-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwcandillon%2Freact-native-img-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwcandillon%2Freact-native-img-cache/lists"}