{"id":21371842,"url":"https://github.com/only-icesoul/react-native-blurview","last_synced_at":"2026-05-07T09:35:50.005Z","repository":{"id":57150238,"uuid":"407927949","full_name":"Only-IceSoul/react-native-blurview","owner":"Only-IceSoul","description":"Real time blur Android Web IOS","archived":false,"fork":false,"pushed_at":"2021-11-28T14:59:13.000Z","size":118,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-20T04:04:46.859Z","etag":null,"topics":["android","backdrop","blur","blurview","drop","fast","fastblur","ios","react-native-web","reactjs","real","realtime","visual","visualeffect","web"],"latest_commit_sha":null,"homepage":"","language":"Java","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/Only-IceSoul.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":"2021-09-18T17:43:28.000Z","updated_at":"2023-09-24T14:24:58.000Z","dependencies_parsed_at":"2022-09-03T18:01:52.273Z","dependency_job_id":null,"html_url":"https://github.com/Only-IceSoul/react-native-blurview","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/Only-IceSoul/react-native-blurview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-blurview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-blurview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-blurview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-blurview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Only-IceSoul","download_url":"https://codeload.github.com/Only-IceSoul/react-native-blurview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-blurview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262891216,"owners_count":23380583,"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":["android","backdrop","blur","blurview","drop","fast","fastblur","ios","react-native-web","reactjs","real","realtime","visual","visualeffect","web"],"created_at":"2024-11-22T08:15:34.364Z","updated_at":"2025-10-10T16:19:43.383Z","avatar_url":"https://github.com/Only-IceSoul.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-blurview\n\nandroid: api 21+   \nios : 10.0+   \nweb: [backdrop](https://caniuse.com/?search=backdrop)\n\n Example -\u003e [Demo](https://github.com/Only-IceSoul/canal/tree/master/react-native/Car%20Insurance%20Claim)  \n\n\u003cimg src=\"./src/demo.jpg\" width=\"300\"\u003e\n\n## Getting started\n\n`$ npm install react-native-realtimeblurview --save`  \n`$ react-native link react-native-realtimeblurview`\n\nor\n\n`$ yarn add react-native-realtimeblurview`\n\n## Usage\n\n\n```javascript\nimport {BlurView , BlurRootView } from 'react-native-realtimeblurview';\n\n// TODO: What to do with the module?\n//(Android) require a blurRootView ,improve perfmonace\n//(Android) Blurview must be a child of rootview\n\u003cBlurRootView  \n name=\"myNode\"\n\u003e\n\n    \u003cView style={{backgroundColor:'red'}}\u003e\n   \n\n \n      \u003cBlurView  \n        blurNode=\"myNode\" \n\n      \u003e\n          \u003cOverlayView style={{backgroundColor:'myColor'}} /\u003e\n      \u003c/BlurView\u003e\n      \n\n\n\u003c/BlurRootView\u003e\n\n```\n\n### Overlay Colors\n\n\u003cbr\u003e\n\n| Name | rgb | a |\n| --- | ---| --- |\n| dark | 0.11 | 0.73 |\n| light | 1 | 0.3 |\n| extraLight | 0.91 | 0.8 |\n\n\u003cbr\u003e \n\n### BlurView Props:  \n\n\u003cbr\u003e\n\nBlurView:  \n If your RootView has a lot of transparent set a backgroundColor (ios ignored)   \n\n| Name | description | type | default |\n| --- | --- | --- | --- |\n| blurNode | the root view | String | undefined |\n| radius | the blur radius (android max 25) | Number | 10 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonly-icesoul%2Freact-native-blurview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonly-icesoul%2Freact-native-blurview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonly-icesoul%2Freact-native-blurview/lists"}