{"id":45482209,"url":"https://github.com/ngnclht1102/rn-cached-image","last_synced_at":"2026-02-22T16:30:20.247Z","repository":{"id":57130666,"uuid":"408335899","full_name":"ngnclht1102/rn-cached-image","owner":"ngnclht1102","description":"A react native cached, animated, and auto chooses the best-resolution image for the current screen.","archived":false,"fork":false,"pushed_at":"2021-09-21T10:49:45.000Z","size":12808,"stargazers_count":29,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-01T21:15:31.956Z","etag":null,"topics":["cached-images","cached-network-images","react-native","react-native-image"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngnclht1102.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-20T06:38:44.000Z","updated_at":"2025-04-03T09:43:59.000Z","dependencies_parsed_at":"2022-08-31T20:01:05.763Z","dependency_job_id":null,"html_url":"https://github.com/ngnclht1102/rn-cached-image","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ngnclht1102/rn-cached-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngnclht1102%2Frn-cached-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngnclht1102%2Frn-cached-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngnclht1102%2Frn-cached-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngnclht1102%2Frn-cached-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngnclht1102","download_url":"https://codeload.github.com/ngnclht1102/rn-cached-image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngnclht1102%2Frn-cached-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29718399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T15:10:41.462Z","status":"ssl_error","status_checked_at":"2026-02-22T15:10:04.636Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["cached-images","cached-network-images","react-native","react-native-image"],"created_at":"2026-02-22T16:30:17.399Z","updated_at":"2026-02-22T16:30:20.209Z","avatar_url":"https://github.com/ngnclht1102.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A react native cached, animated and auto chooses the best-resolution image for the current screen.\n#### This is a simple react native image component that\n- enable image caching (save to cache directory).\n- add loading animation while the image is loading.\n- add error placeholder if image loading has any errors.\n- also wrap the https://github.com/expo/react-native-responsive-image so it can choose the correct image size for loading\n\n## Installation\n```\nyarn add @ngnclht/rn-cached-image\n```\n\nImport it with:\n\n```js\nimport RNCachedImage from ' @ngnclht/rn-cached-image';\n```\n\n## Demo: Loading animation and caching\n\n![Loading animation and caching](demo/demo.gif)\n\n## Demo: Loading failed:\n\n![Error placeholder](demo/error-placeholder.png)\n\n## Usage\n\nRNCachedImage accepts the same props as Image, and some new props. \nFor multiple sources, we have a new prop called `sources`. The `sources` prop is \nan object whose keys are pixel ratios (that is, screen scales like \"2\" or \"3\"). \nIts values are Image sources to display on screens with the respective pixel ratio.\n\n#### Multiple sources:\n\n```js\n\u003cRNCachedImage\n  sources={{\n    1: { uri: 'https://example.com/icon-1x.png' },\n    2: { uri: 'https://example.com/icon-2x.png' },\n    3: { uri: 'https://example.com/icon-3x.png' },\n  }}\n  // (optional) force ResponsiveImage to load a specified pixel ratio\n  preferredPixelRatio={2}\n/\u003e\n```\n#### Caching\n\n```js\n  \u003cRNCachedImage\n    style={{ \n        // some style\n    }}\n    animationOnLoadEndType='fade' // we support 'shrink', 'explode' and 'fade'\n    shouldCachedImage={true} //  to enable caching or not\n    maxAgeInHours={72} // max age of the cache file, by default it is 72 hours (3 days)\n    source={{ uri: localSource }} // if you don't like the multiple sources, just use this prop as usual \n    sources={{\n        1: { uri: 'https://example.com/icon-1x.png' },\n        2: { uri: 'https://example.com/icon-2x.png' },\n        3: { uri: 'https://example.com/icon-3x.png' },\n    }}\n    animationWhileLoading={true} // enable animation while loading\n    reuseView={true} // allow update the view\n    placeholderColor={\"#e0e5e5\"} // animation's color for using while it is loading\n    errorPlaceholderSource={require('./your-image.png')} // the image will be used to show user when image loading failed\n  /\u003e\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngnclht1102%2Frn-cached-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngnclht1102%2Frn-cached-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngnclht1102%2Frn-cached-image/lists"}