{"id":15651821,"url":"https://github.com/mitogh/react-native-image-placeholder","last_synced_at":"2025-10-07T02:18:25.546Z","repository":{"id":57337645,"uuid":"88469279","full_name":"mitogh/react-native-image-placeholder","owner":"mitogh","description":"Load images incrementally to provide a better UX","archived":false,"fork":false,"pushed_at":"2025-07-30T18:06:54.000Z","size":26079,"stargazers_count":31,"open_issues_count":6,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-21T12:12:54.180Z","etag":null,"topics":["image","javascript","progressive","progressive-rendering","react","react-native"],"latest_commit_sha":null,"homepage":null,"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/mitogh.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":"2017-04-17T04:31:57.000Z","updated_at":"2025-06-30T20:31:17.000Z","dependencies_parsed_at":"2022-08-29T19:41:33.960Z","dependency_job_id":null,"html_url":"https://github.com/mitogh/react-native-image-placeholder","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mitogh/react-native-image-placeholder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitogh%2Freact-native-image-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitogh%2Freact-native-image-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitogh%2Freact-native-image-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitogh%2Freact-native-image-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mitogh","download_url":"https://codeload.github.com/mitogh/react-native-image-placeholder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitogh%2Freact-native-image-placeholder/sbom","scorecard":{"id":650449,"data":{"date":"2025-08-11","repo":{"name":"github.com/mitogh/react-native-image-placeholder","commit":"24b501ad304977d92b91caace02653bbf3ca3be1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 1/20 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 6 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"32 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-pw54-mh39-w3hc","Warn: Project is vulnerable to: GHSA-xgh6-85xh-479p","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T13:23:10.630Z","repository_id":57337645,"created_at":"2025-08-21T13:23:10.630Z","updated_at":"2025-08-21T13:23:10.630Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278708004,"owners_count":26031932,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["image","javascript","progressive","progressive-rendering","react","react-native"],"created_at":"2024-10-03T12:40:15.767Z","updated_at":"2025-10-07T02:18:25.526Z","avatar_url":"https://github.com/mitogh.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Native Image Placeholder\n\n\u003e Load images incrementally to provide a better User Experience.\n\nIf you want to download larger images but provide with a nice transition while the users are waiting\nfor the image you can provide with a smaller version of the image (as [you can see on the\n  examples](#examples)).\n\nThis is inspired on how [medium](https://medium.com) loads the articles and the `iron-image` component\nfrom the [polymer](https://www.webcomponents.org/element/PolymerElements/iron-image) library works\nby providing the option to present the larger image and give to the user a hint of the presence of\nan image, specially on slower connections.\n\nIt basically fetchs an image an tracks the progress of the image once is ready it shows the user the\nrequeested image but during the period of loading the user can show a spinner or at least a hint of\nthe image in a smaller version.\n\n# Examples\n\n## Multiple Images.\n\n![](https://raw.githubusercontent.com/mitogh/react-native-image-placeholder/master/img/multiple.gif)\n\n## Single Image.\n\n![](https://raw.githubusercontent.com/mitogh/react-native-image-placeholder/master/img/single.gif)\n\n# Installation\n\n```bash\nnpm install --save react-native-image-with-placeholder\n```\n\n# Getting started\n\nImport the file as specified on the [installation steps](#installation). Then import the Component where you have\nplans to use it, for example: \n\n```js\nimport ImagePlaceholder from 'react-native-image-with-placeholder'\n```\n\nAnd inside of the `render` method of your component add the component with the properties you\nrequire.\n\n## Basic usage\n\n```js\n\u003cImagePlaceholder \n  style={{ flex: 1 }}\n  duration={1000}\n  activityIndicatorProps={{\n    size: 'large',\n    color: 'green',\n  }}\n  src='https://s3.amazonaws.com/crisoforo.com/flowers.jpg' \n  placeholder='https://s3.amazonaws.com/crisoforo.com/flowers-small.jpg'\n  /\u003e\n);\n```\n\n## Multiple images with different transition speed\n\n```js\nrender() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cImagePlaceholder \n        style={styles.item}\n        src='https://s3.amazonaws.com/crisoforo.com/airplane.jpg' \n        placeholder='https://s3.amazonaws.com/crisoforo.com/airplane-mini.jpg'\n      /\u003e\n      \u003cImagePlaceholder \n        style={styles.item}\n        duration={3000}\n        src='https://s3.amazonaws.com/crisoforo.com/flowers.jpg' \n        placeholder='https://s3.amazonaws.com/crisoforo.com/flowers-small.jpg'\n      /\u003e\n      \u003cImagePlaceholder \n        style={styles.item}\n        duration={1000}\n        src='https://s3.amazonaws.com/crisoforo.com/sun.jpg' \n        placeholder='https://s3.amazonaws.com/crisoforo.com/sun-small.jpg'\n      /\u003e\n    \u003c/View\u003e\n    )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n  },\n  item: {\n    flex: 1,\n  }\n});\n```\n\n# API\n\nProps             | Type          | Optional      | Default     | Description  \n------------------|---------------|---------------|-------------|------------  \nsrc | String | false | null | The url of the main image to be fetched.    \nplaceholder | String | true | null | The smaller image present before the main image is ready if is not present  it will show an [`ActivityIndicator`](https://facebook.github.io/react-native/docs/activityindicator.html) component instead.\nstyle   |   View.propTypes.style  |   true  |   [Container Style](https://github.com/mitogh/react-native-image-placeholder/blob/master/ImagePlaceholder.js#L90-L93)   |   Style applied to the image container  \nimageStyle | Object | true | null | The styles appliead to the main image.  \nplaceholderStyle | Object | true | null | The styles applied to the placeholder image.  \nplaceholderContainerStyle | Object | true | null | The styles applied to the container `View` of the placeholder image.  \nduration  |   Integer   |   true  |   750   |   Time in miliseconds used to transition to the original image once is ready.   \nshowActivityIndicator   |   Boolean   |   true  |   true  | If `true` an [`ActivityIndicator`](https://facebook.github.io/react-native/docs/activityindicator.html) should be displayed while the placeholder image is being fetch or if is not present.  \nactivityIndicatorProps  |   Object  |   true  |   null  |   Options to pass to the [`ActivityIndicator`](https://facebook.github.io/react-native/docs/activityindicator.html) component such as `size`, `color` or `style`.   \n[`ActivityIndicator`](https://facebook.github.io/react-native/docs/activityindicator.html) |   Component   | true  | null  | If present it will render this instead of the [`ActivityIndicator`](https://facebook.github.io/react-native/docs/activityindicator.html) component and `activityIndicatorProps` is no longer used and valid. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitogh%2Freact-native-image-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitogh%2Freact-native-image-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitogh%2Freact-native-image-placeholder/lists"}