{"id":4057,"url":"https://github.com/jayesbe/react-native-cacheable-image","last_synced_at":"2025-08-04T00:31:23.176Z","repository":{"id":57335890,"uuid":"55561533","full_name":"jayesbe/react-native-cacheable-image","owner":"jayesbe","description":"An Image Component for React Native that will cache itself to disk. ","archived":false,"fork":false,"pushed_at":"2019-12-17T12:54:15.000Z","size":59,"stargazers_count":304,"open_issues_count":21,"forks_count":80,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-25T00:51:39.400Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jayesbe.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":"2016-04-05T23:43:32.000Z","updated_at":"2024-04-15T20:30:56.000Z","dependencies_parsed_at":"2022-09-15T15:11:41.547Z","dependency_job_id":null,"html_url":"https://github.com/jayesbe/react-native-cacheable-image","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayesbe%2Freact-native-cacheable-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayesbe%2Freact-native-cacheable-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayesbe%2Freact-native-cacheable-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayesbe%2Freact-native-cacheable-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jayesbe","download_url":"https://codeload.github.com/jayesbe/react-native-cacheable-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576895,"owners_count":17939645,"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":[],"created_at":"2024-01-05T20:16:59.775Z","updated_at":"2024-12-07T07:31:04.733Z","avatar_url":"https://github.com/jayesbe.png","language":"JavaScript","readme":"# react-native-cacheable-image\nAn Image component for React Native that will cache itself to disk. \n\n## Notes\nCacheableImage understands its state. Once you define a source the first time it's state has been set. You can create another component with the same source and it will load the same cached file without having to fetch from a remote URI.\n\nHowever, if you happen to change the source, the original cached file will be removed and a new cached image will be created. Basically, don't change the source once you've set it unless you need to. Create a new CacheableImage component and swap if you don't want the current image to be wiped from the cache.\n\nThis is beneficial in say you have a User Profile Image.  If the user changes their image, the current profile image will be removed from the cache and the new image will be saved to the cache. \n\nLocal assets are not cached and are passed through. (ie, Default/Placeholder Images) \n\nThis component has been tested with AWS CloudFront and as such only uses the path to the image to generate its hash. Any URL query params are ignored. \n\nPull Requests for enhancing this component are welcome.    \n\n## Installation\nnpm i react-native-cacheable-image --save\n\n## Dependencies\n- [react-native-responsive-image](https://github.com/Dharmoslap/react-native-responsive-image) to provide responsive image handling.\n- [url-parse](https://github.com/unshiftio/url-parse) for url handling\n- [crypto-js](https://github.com/brix/crypto-js) for hashing\n- [react-native-fs](https://github.com/johanneslumpe/react-native-fs) for file system access\n\n### Dependency Installation\n- For `react-native-fs`. You need to link the module. Either try `rnpm link react-native-fs` or `react-native link react-native-fs`. See react-native-fs for more information. \n\n### Network Status\n#### Android\n\nAdd the following line to your android/app/src/AndroidManifest.xml\n\n`\u003cuses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/\u003e`\n\n## Usage\n```javascript\nimport CacheableImage from 'react-native-cacheable-image'\n```\n\n### Props\n\n* `activityIndicatorProps` - pass this property to alter the ActivityIndicator\n* `defaultSource`           - pass this property to provide a default source to fallback on (the defaultSource is attached to another CacheableImage component)\n* `useQueryParamsInCacheKey` - Defaults to false for backwards compatibility. Set to true to include query parameters in cache key generation. Set to an array of parameters to only include specific parameters in cache key generation. \n\n## Example\n\n```jsx\n    \u003cCacheableImage \n        resizeMode=\"cover\"\n        style={{flex: 1}}\n        source={{uri: \"http://www.foobar.com/image.jpeg\"}}\n    \u003e\n\t    \u003cCacheableImage\n            style={styles.nestedImage}\n            source={require(./someImage.jpeg)}\n            defaultSource={{uri: \"http://www.foobar.com/defaultImage.jpeg\"}}\n        \u003e\n            \u003cView\u003e\n                \u003cText\u003eExample\u003c/Text\u003e\n            \u003c/View\u003e\n        \u003c/CacheableImage\u003e\n    \u003c/CacheableImage\u003e\n```\n \n\nLEGAL DISCLAIMER\n----------------\n\nThis software is published under the MIT License, which states that:\n\n\u003e THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n\u003e IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n\u003e FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n\u003e AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n\u003e LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n\u003e OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n\u003e SOFTWARE.\n    \n","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayesbe%2Freact-native-cacheable-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjayesbe%2Freact-native-cacheable-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayesbe%2Freact-native-cacheable-image/lists"}