{"id":15060574,"url":"https://github.com/dominicstop/react-native-ios-visual-effect-view","last_synced_at":"2025-08-02T05:08:02.593Z","repository":{"id":250394294,"uuid":"834345156","full_name":"dominicstop/react-native-ios-visual-effect-view","owner":"dominicstop","description":"A react-native library for using UIVisualEffectView on iOS, with support for using preset system visual effects, as well as using custom blur radius, and creating custom filters (with out of the box support for simple animations).","archived":false,"fork":false,"pushed_at":"2025-07-27T01:35:47.000Z","size":87039,"stargazers_count":25,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-27T03:38:15.363Z","etag":null,"topics":["cafilter","fabric","jsi","react","react-natve","swift","uikit","uivisualeffectview"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/dominicstop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2024-07-27T02:23:29.000Z","updated_at":"2025-07-27T01:51:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"7e2ca447-e747-4b16-9f73-45040e442956","html_url":"https://github.com/dominicstop/react-native-ios-visual-effect-view","commit_stats":{"total_commits":136,"total_committers":1,"mean_commits":136.0,"dds":0.0,"last_synced_commit":"de7b6c6d98c9fe652440e725bb82068f3d0d63d1"},"previous_names":["dominicstop/react-native-ios-visual-effect-view"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/dominicstop/react-native-ios-visual-effect-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-visual-effect-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-visual-effect-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-visual-effect-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-visual-effect-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dominicstop","download_url":"https://codeload.github.com/dominicstop/react-native-ios-visual-effect-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dominicstop%2Freact-native-ios-visual-effect-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268338020,"owners_count":24234539,"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-02T02:00:12.353Z","response_time":74,"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":["cafilter","fabric","jsi","react","react-natve","swift","uikit","uivisualeffectview"],"created_at":"2024-09-24T23:00:33.030Z","updated_at":"2025-08-02T05:08:02.568Z","avatar_url":"https://github.com/dominicstop.png","language":"TypeScript","funding_links":["https://github.com/sponsors/dominicstop"],"categories":[],"sub_categories":[],"readme":"# react-native-ios-visual-effect-view\n\nA small library to use `UIVisualEffectView` in `react-native`.\n\n\u003cimg src=\"./assets/example-demo-01.gif\" alt=\"example-demo-01\" style=\"zoom:67%;\" /\u003e\n\n\u003cbr\u003e\n\n[`VisualEffectCustomFilterViewTest01Screen`](example/src/examples/CustomFilterViewTest01Screen.tsx)\n\n![RNIVisualEffectCustomFilterViewTest01Screen.tsx](./assets/RNIVisualEffectCustomFilterViewTest01Screen.gif)\n\n\u003cbr\u003e\n\n[`VisualEffectCustomFilterViewTest01Screen`](example/src/examples/AnimatableCustomFilterViewTest02Screen.tsx)\n\n![AnimatableCustomFilterViewTest02Screen.tsx](./assets/AnimatableCustomFilterViewTest02Screen-01.gif)\n\n\u003cbr\u003e\n\n[`VisualEffectCustomFilterViewTest02Screen`](example/src/examples/AnimatableCustomFilterViewTest02Screen.tsx)\n\n![AnimatableCustomFilterViewTest02Screen.tsx](./assets/AnimatableCustomFilterViewTest02Screen-02.gif)\n\n![AnimatableCustomFilterViewTest02Screen.tsx](./assets/AnimatableCustomFilterViewTest02Screen-01.gif)\n\n\u003cbr\u003e\u003cbr\u003e\n\n## 🚧⚠️ Notices ⚠️🚧\n\n📝 **Hiatus Notice**: Unfortunately, i'm no longer doing OSS for the time being, so this library is in maintenance mode (if you're interested in sponsoring my work or picking up the project, please don't hesitate to [contact me](#misc-and-contact)).\n\n📝 **WIP Notice**: This library + documentation is currently not finished yet. For now, please browse through [examples](example/src/examples) directory to get a rough idea on how to use this library. Jump to [basic usage section](#c-basic-usage) for example code + gif.\n\n\u003cbr\u003e\u003cbr\u003e\n\n### Acknowledgements\n\nvery special thanks to: [junzhengca](https://github.com/junzhengca), [brentvatne](https://github.com/brentvatne), [expo](https://github.com/expo), [EvanBacon](https://github.com/EvanBacon), [corasan](https://github.com/corasan), [lauridskern](https://github.com/lauridskern), [ronintechnologies](https://github.com/ronintechnologies), [gerzonc](https://github.com/gerzonc), and [edencakir](https://github.com/edencakir) for becoming a monthly sponsor, and thank you [fobos531](https://github.com/fobos531) for being a one time sponsor 🥺 (if you have the means to do so, please considering sponsoring [here](https://github.com/sponsors/dominicstop))\n\n\u003cbr\u003e\u003cbr\u003e\n\n## A. Introduction\n\nhttps://github.com/user-attachments/assets/74bf8afa-91ed-49d8-80aa-a17b8e7969b0\n\nhttps://github.com/user-attachments/assets/16d2c2ee-5453-43ea-bd3f-aa8331fbcd58\n\n\u003cbr\u003e\n\n* ❤️ Support for using `UIVisualEffectView` + all the system [`UIBlurEffectStyles`](https://github.com/dominicstop/react-native-ios-utilities/blob/master/src/constants/UIBlurEffectStyles.ts).\n* 🧡 Support for using custom blur radius and effect intensity (percent).\n* 💚 Support for animating the blur effect style + blur radius changes.\n* 💙 Support for creating and using filters (WIP)\n* 💜 Runs on the old + new architecture (paper + fabric).\n\n\u003cbr\u003e\n\n### Testflight and Testing\n\nThe example app builds are automatically created and submitted on every version release via Xcode cloud, so if you just want to quickly try things out, the example app is available to try out via testflight ([invite link](https://testflight.apple.com/join/YsGzqBxB)).\n\nAlternatively, you can also try out the corresponding example app to the native dependency that this library uses under the hood: [`VisualEffectBlurView`](https://github.com/dominicstop/VisualEffectBlurView) ([invite link](https://testflight.apple.com/join/rP5yWFYx)).\n\n\u003cbr\u003e\n\n### Other Related Gifs\n\n[`Experiment02ViewController.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/main/example/Routes/Experiment02ViewController.swift)\n\n![Experiment02ViewController](https://github.com/dominicstop/VisualEffectBlurView/raw/main/assets/Experiment02ViewController.gif)\n\n\u003cbr\u003e\n\n[`VisualEffectBlurTestViewController.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/main/example/Routes/VisualEffectBlurTestViewController.swift)\n\n![VisualEffectBlurTestViewController](https://github.com/dominicstop/VisualEffectBlurView/raw/main/assets/VisualEffectBlurTestViewController.gif)\n\n\u003cbr\u003e\n\n[`VisualEffectViewExperiment01ViewController.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/main/example/Routes/VisualEffectViewExperiment01ViewController.swift)\n\n![VisualEffectViewExperiment01ViewController-01](https://github.com/dominicstop/VisualEffectBlurView/raw/main/assets/Demo-VisualEffectBlurTestViewController-01.gif)\n\n![VisualEffectViewExperiment01ViewController-02](https://github.com/dominicstop/VisualEffectBlurView/raw/main/assets/Demo-VisualEffectBlurTestViewController-02.gif)\n\n\u003cbr\u003e\n\n[`VisualEffectCustomFilterViewTest02Controller.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/main/example/Routes/VisualEffectCustomFilterViewTest02Controller.swift)\n\n![VisualEffectCustomFilterViewTest02Controller](https://github.com/dominicstop/VisualEffectBlurView/raw/main/assets/VisualEffectCustomFilterViewTest02Controller.gif)\n\n\u003cbr\u003e\u003cbr\u003e\n\n## B. Installation\n\n**Note**: Support for the new architecture (fabric), and backwards compatibility for the old architecture (paper) is handled via a peer dependency to [`react-native-ios-utilites@v5`](https://github.com/dominicstop/react-native-ios-utilities).\n\n```sh\n# 1. install library + dependencies\nnpm install react-native-ios-visual-effect-view@next\nnpm install react-native-ios-utilities@next\n\n# 2. then run pod install (uses auto-linking)\ncd ios \u0026\u0026 pod install\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n### Updating\n\nThis library has cocoapods dependency to [`VisualEffectBlurView`](https://github.com/dominicstop/VisualEffectBlurView) and [`DGSwiftUtilities`](https://github.com/dominicstop/DGSwiftUtilities), so you may need to update them separately (as needed).\n\n```sh\n# A. Either update this specific pod...\npod update VisualEffectBlurView DGSwiftUtilities\npod install --repo-update\n\n# B. Or update all the pods\npod update\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n## C. Basic Usage\n\nhello! please see [`BlurViewBasicUsage01`](example/src/examples/BlurViewBasicUsage01.tsx) for the full example\n\n\n```js\n// 📝 Note: for the sake of brevity, some of the code is omitted...\nimport { BlurView } from 'react-native-ios-visual-effect-view';\n\n\nexport function BlurViewBasicUsage01() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText style={styles.label}\u003e\n        {'❤️\\n🧡\\n💛\\n💚\\n💙\\n💜\\n💖\\n💃\\n✨'}\n      \u003c/Text\u003e\n      \u003cRNIBlurView\n        style={styles.effectOverlay}\n        blurMode={{\n          mode: 'blurEffectSystem',\n          blurEffectStyle: 'prominent',\n        }}\n        animationConfig={{\n          duration: 1,\n          mode: 'presetCurve',\n          curve: 'easeOut',\n        }}\n        animationDelay={1}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n\u003cimg src=\"assets/RNIBlurViewBasicUsage01.gif\" width=\"400\"\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n## D. Documentation\n\nTBA\n\n\u003cbr\u003e\u003cbr\u003e\n\n## E. Examples\n\nPlease see the [examples directory](example/src/examples) for the full list of examples, demos and tests.\n\n\u003cbr\u003e\n\n### `CustomFilterViewExample01`\n\n**Summary**: Create a custom filter that darkens the views in the background, and applies a variable blur.\n\n\u003cbr\u003e\n\n| Notes                                                        |\n| :----------------------------------------------------------- |\n| 1️⃣ — The `CustomFilterView.currentFilters` prop accepts a  `CustomFilterConfig` object; this object is used create and configure the underlying `UIVisualEffectView` effects.\u003cbr\u003e\u003cbr\u003eThe `CustomFilterConfig` is comprised of several properties, but for this example we will be focusing on the `CustomFilterConfig.backgroundFilters` property (since it's required). |\n| 2️⃣ — The `CustomFilterConfig.backgroundFilters` property accepts an array of `LayerFilterConfig` object; the \"filter entries\" in this array defines what filters to use for the  `UIVisualEffectView`'s backdrop layer.\u003cbr\u003e\u003cbr\u003eThe backdrop layer is special in that it is able to composite views that are behind it, and apply filters to it.\u003cbr\u003e\u003cbr\u003e📝 **Note**: The \"quality\" of the composited views can be controlled via the `CustomFilterView.backgroundLayerSamplingSizeScale` prop; Setting this to `2.0` increases the sampling size, but at the cost of performance (use with caution). |\n| 3️⃣ — The `LayerFilterConfig` object is an tagged union type, with the `LayerFilterConfig.filterName` property being the \"discriminant\" that separates all the possible combinations.\u003cbr\u003e\u003cbr\u003eThe `filterName` defines what type of filter to use; different types of filters have different inputs to control the look/behavior of the desired effect.\u003cbr\u003e\u003cbr\u003eIn the example below, we define 4 `LayerFilterConfig` entries in the array for the `CustomFilterConfig.backgroundFilters` property: `variadicBlur` (variable blur), `colorBlackAndWhite` (color monochrome), `brightenColors` (color brightness), and `contrastColors` (color contrast).\u003cbr\u003e\u003cbr\u003e📝 **Note**: The names for the filter are a bit weird because we can't use the internal filters directly. Please see  [`LayerFilterTypeName.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/1ac12b049e53ace5dce4ce46870024d5f98b052a/Sources/ObjectWrappers/LayerFilterWrapper/LayerFilterTypeName.swift) for the implementation details. |\n\n\u003cbr\u003e\n\n[🔗 Full Example](example/src/examples/CustomFilterViewExample01.tsx)\n\n```jsx\nexport function CustomFilterViewExample01() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText style={styles.label}\u003e\n        {emojiString}\n      \u003c/Text\u003e\n      \u003cCustomFilterView\n        style={styles.effectOverlay}\n        // increase quality (usually: 0.25...1)\n        backgroundLayerSamplingSizeScale={2}\n\n        // set the filters to use,\n        // accepts an array of `LayerFilterConfig`\n        currentFilters={{\n          backgroundFilters: [\n            // filter 1 of 4\n            // create variable blur filter\n            {\n              filterName: 'variadicBlur',\n              radius: 8,\n              shouldNormalizeEdges: true,\n\n              // define the intensity of blur via a gradient\n              gradientMask: {\n                type: 'axial',\n                colors: [\n                  'rgba(0,0,0,1)', // max blur\n                  'rgba(0,0,0,0)', // no blur\n                ],\n                startPointPreset: 'topCenter',\n                endPointPreset: 'bottomCenter',\n                size: {\n                  height: WINDOW_SIZE.height,\n                  width: WINDOW_SIZE.width,\n                },\n              }\n            },\n\n            // filter 2 of 4\n            // Slightly desaturate colors\n            {\n              filterName: 'colorBlackAndWhite',\n              amount: 0.5\n            },\n\n            // filter 3 of 4\n            // reduce brightness\n            {\n              filterName: 'brightenColors',\n              amount: -0.5\n            },\n\n            // filter 4 of 4\n            // decrease contrast\n            {\n              filterName: 'contrastColors',\n              amount: 0.4,\n            },\n          ]\n        }}\n      \u003e\n        \u003cText\u003e\n          {'Hello World'}\n        \u003c/Text\u003e\n      \u003c/CustomFilterView\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n\u003cimg src=\"assets/ CustomFilterViewExample01.png\" alt=\"CustomFilterViewExample01\" height=\"600\" /\u003e\n\n\u003cbr\u003e\n\n### `CustomFilterViewExample02`\n\n**Summary**: TBA\n\n[🔗 Full Example](example/src/examples/CustomFilterViewExample02.tsx)\n\n```jsx\nexport function CustomFilterViewExample02() {\n  // ...\n  return (\n    \u003cView style={styles.container}\u003e\n      { /* ... */ }\n      \u003cCustomFilterView\n        style={styles.effectOverlay}\n        backgroundLayerSamplingSizeScale={2}\n        currentFilters={{\n          backgroundFilters: [\n            {\n              filterName: 'gaussianBlur',\n              radius: 18,\n              shouldNormalizeEdges: true,\n            },\n            {\n              filterName: 'brightenColors',\n              amount: -0.5\n            },\n            {\n              filterName: 'contrastColors',\n              amount: 0.3,\n            },\n            {\n              filterName: 'colorBlackAndWhite',\n              amount: 1,\n            },\n          ],\n          tintConfig: {\n            opacity: 0.75,\n            blendMode: 'color',\n            tintColor: 'red',\n          },\n          foregroundFilters: [\n            {\n              filterName: 'gaussianBlur',\n              radius: 4,\n              shouldNormalizeEdges: false\n            },\n            {\n              filterName: 'colorMatrixVibrant',\n              colorMatrix: {\n                mode: 'preset',\n                preset: {\n                  mode: 'presetName',\n                  presetName: 'preset14'\n                },\n              },\n            },\n          ]\n        }}\n      \u003e\n        \u003cView style={styles.effectContent}\u003e\n          \u003cCounterDisplay\n            counter={counter}\n          /\u003e\n        \u003c/View\u003e\n      \u003c/CustomFilterView\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n\u003cimg src=\"assets/ CustomFilterViewExample02.png\" alt=\"CustomFilterViewExample02\" height=\"600\" /\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n\u003cbr\u003e\u003cbr\u003e\n\n## License\n\nMIT\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Misc and Contact\n\n* 🐤 **Twitter/X**: [`@GoDominic`](https://x.com/GoDominic)\n* 🦋 **Bluesky**: [`@godominic.bsky.social`](https://bsky.app/profile/godominic.bsky.social)\n* 💌 **Email**: \u003ca href=\"mailto:dominicgo@dominicgo.dev?\"\u003e`dominicgo@dominicgo.dev`\u003c/a\u003e\n* 🌐 **Website**: [dominicgo.dev](https://dominicgo.dev)\n\n\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdominicstop%2Freact-native-ios-visual-effect-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdominicstop%2Freact-native-ios-visual-effect-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdominicstop%2Freact-native-ios-visual-effect-view/lists"}