{"id":24656598,"url":"https://github.com/virtualvivek/react-native-image-blur-shadow","last_synced_at":"2025-08-19T01:09:59.270Z","repository":{"id":57337578,"uuid":"359554497","full_name":"virtualvivek/react-native-image-blur-shadow","owner":"virtualvivek","description":"A React Native \u003cImage/\u003e component with Blur Drop Shadows,100% JavaScript, 0 dependency component. Supports Android, iOS and Web. A light weight Image component for your react native project.","archived":false,"fork":false,"pushed_at":"2024-10-22T18:22:02.000Z","size":2481,"stargazers_count":91,"open_issues_count":1,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-08-02T17:37:48.137Z","etag":null,"topics":["android","blurview","component","image","image-blur-shadows","image-component","image-shadow","ios","javascript","mobile","react","react-native","react-native-component","shadow"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-image-blur-shadow","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/virtualvivek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"patreon":"virtualvivek","open_collective":null,"custom":["https://www.buymeacoffee.com/virtualvivek"]}},"created_at":"2021-04-19T18:08:33.000Z","updated_at":"2025-01-20T04:52:09.000Z","dependencies_parsed_at":"2025-04-27T14:02:10.819Z","dependency_job_id":"39bfae0a-0009-4b6f-8524-5a15ed83bcf8","html_url":"https://github.com/virtualvivek/react-native-image-blur-shadow","commit_stats":{"total_commits":71,"total_committers":2,"mean_commits":35.5,"dds":"0.47887323943661975","last_synced_commit":"e1330319835cbdbbd9b5a04e719df611c4c1a2d4"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/virtualvivek/react-native-image-blur-shadow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2Freact-native-image-blur-shadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2Freact-native-image-blur-shadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2Freact-native-image-blur-shadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2Freact-native-image-blur-shadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/virtualvivek","download_url":"https://codeload.github.com/virtualvivek/react-native-image-blur-shadow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtualvivek%2Freact-native-image-blur-shadow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271083943,"owners_count":24696411,"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-08-18T02:00:08.743Z","response_time":89,"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":["android","blurview","component","image","image-blur-shadows","image-component","image-shadow","ios","javascript","mobile","react","react-native","react-native-component","shadow"],"created_at":"2025-01-25T23:31:04.476Z","updated_at":"2025-08-19T01:09:59.246Z","avatar_url":"https://github.com/virtualvivek.png","language":"JavaScript","funding_links":["https://patreon.com/virtualvivek","https://www.buymeacoffee.com/virtualvivek"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-native-image-blur-shadow\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA React Native \u003cb\u003e\u003ccode\u003e\u0026lt;Image/\u0026gt;\u003c/code\u003e\u003c/b\u003e component with \u003cb\u003eBlur Drop Shadows\u003c/b\u003e, \u003cb\u003e100% JavaScript\u003c/b\u003e, \u003cb\u003e0 Dependency component\u003c/b\u003e. \u003cbr/\u003eSupports \u003cb\u003eAndroid, iOS\u003c/b\u003e and \u003cb\u003eWeb\u003c/b\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e  \n\n\u003ca href=\"https://www.npmjs.com/package/react-native-image-blur-shadow\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/platform-Android | iOS | Web-green.svg?style=flat-square\u0026color=8a1db3\u0026logo=PyTorchLightning\"\n        alt=\"Platform\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/virtualvivek/react-native-image-blur-shadow/tree/main/src\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/100%25-Javascript-green.svg?style=flat-square\u0026logo=javascript\u0026color=F7DF1E\"\n        alt=\"Javascript\" /\u003e\n\u003c/a\u003e\n    \n\u003cbr/\u003e\n  \n\u003ca href=\"https://github.com/virtualvivek/react-native-image-blur-shadow/releases/latest\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/package-json/v/virtualvivek/react-native-image-blur-shadow?color=%2331b57e\u0026style=flat-square\"\n        alt=\"Version\" /\u003e\n\u003c/a\u003e\n    \n\u003ca href=\"https://github.com/virtualvivek/react-native-image-blur-shadow/blob/main/src/index.js\"\u003e\n    \u003cimg alt=\"GitHub code size in bytes\" src=\"https://img.shields.io/github/languages/code-size/virtualvivek/react-native-image-blur-shadow?color=4fba32\u0026style=flat-square\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.npmjs.com/package/react-native-image-blur-shadow\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/npm-package-green.svg?style=flat-square\u0026logo=npm\u0026color=CB3837\"\n        alt=\"NPMJS\" /\u003e\n\u003c/a\u003e\n\n\u003c/p\u003e\n​\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/virtualvivek/react-native-image-blur-shadow/blob/main/app/markdown/md_preview_one.png\" width=\"250\" /\u003e\n    \u003cimg src=\"https://github.com/virtualvivek/react-native-image-blur-shadow/blob/main/app/markdown/md_preview_two.png\" width=\"250\" /\u003e\n\u003c/p\u003e\n\n# Demo\n\u003ca href=\"https://snack.expo.io/@virtualvivek/image-blur-shadow\" target=\"_blank\"\u003ehttps://snack.expo.io/@virtualvivek/image-blur-shadow\u003c/a\u003e\n\n# Installation\n\n```ruby\n$ npm install react-native-image-blur-shadow\n```\n## Import\n\n```jsx\nimport ImageBlurShadow from \"react-native-image-blur-shadow\";\n```\n\n# Usage\n\n```js\nimport ImageBlurShadow from \"react-native-image-blur-shadow\";\n\n\u003cImageBlurShadow\n  style={styles.img}\n  source={require('./src/assets/spiderman.jpg')}\n  imageWidth={220}\n  imageHeight={220}\n  imageBorderRadius={22}\n  shadowOffset={38}\n  shadowBlurRadius={48}\n  shadowBackgroundColor={'#ffffff'}\n/\u003e\n```\n\n# Props\n\n| Property             |  Type   | Default | Description                                  |\n| -------------------- | :-----: | :-----: | -------------------------------------------- |\n| style                | object  |  `{}`   | set the style of component container         |\n| source               | string  |  `null` | set the image source                         |\n| imageWidth           | number  |  default| set image width                              |\n| imageHeight          | number  |  default| set image height                             |\n| imageBorderRadius    | number  |  0      | set image border radius                      |\n| imageFadeDuration    | number  |  300    | set image fade animation duration in ms      |\n| shadowOffset         | number  |  38     | set/override shadow offset                   |\n| shadowBlurRadius     | number  |  34     | set/override shadow blurRadius               |\n| shadowBackgroundColor| HexColor|`#ffffff`| set/override shadow background color         |\n| shadowFadeDuration   | number  |  300    | set shadow fade animation duration in ms     |\n\n# Advance Props\n\n| Property                    |  Type   | Default | Description                                  |\n| --------------------------- | :-----: | :-----: | -------------------------------------------- |\n| defaultSource               | object  |  `{}`   | set the default image source `iOS`           |\n| onLoad                      | object  |  `{}`   | on Image Load Callback                       |\n| onError                     | object  |  `{}`   | on Image Error Callback                      |\n| onLoadStart                 | object  |  `{}`   | on Image Load Start Callback                 |\n| onLoadEnd                   | object  |  `{}`   | on Image Load End Callback                   |\n| onProgress                  | object  |  `{}`   | on Image Load Progress Callback              |\n| onPartialLoad               | object  |  `{}`   | on Image Partial Load Callback               |\n| imageBorderTopLeftRadius    | number  |   0     | set image top left border radius             |\n| imageBorderTopRightRadius   | number  |   0     | set image top right border radius            |\n| imageBorderBottomLeftRadius | number  |   0     | set image bottom left border radius          |\n| imageBorderBottomRightRadius| number  |   0     | set image bottom right border radius         |\n\n\n# Find this component useful? :heart:\nSupport it by joining [stargazers](https://github.com/virtualvivek/react-native-image-blur-shadow/stargazers) for this repository. :star:\n\n# License\n\n**`react-native-image-blur-shadow`** is licensed under **`MIT license`**. View [license](https://github.com/virtualvivek/react-native-image-blur-shadow/blob/main/LICENSE). \u003cbr\u003e\nCopyright (c) 2021-24 [Vivek Verma](https://github.com/virtualvivek)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvirtualvivek%2Freact-native-image-blur-shadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvirtualvivek%2Freact-native-image-blur-shadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvirtualvivek%2Freact-native-image-blur-shadow/lists"}