https://github.com/dominicstop/react-native-ios-visual-effect-view
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).
https://github.com/dominicstop/react-native-ios-visual-effect-view
cafilter fabric jsi react react-natve swift uikit uivisualeffectview
Last synced: 3 months ago
JSON representation
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).
- Host: GitHub
- URL: https://github.com/dominicstop/react-native-ios-visual-effect-view
- Owner: dominicstop
- License: mit
- Created: 2024-07-27T02:23:29.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-01-24T22:19:51.000Z (6 months ago)
- Last Synced: 2025-04-06T06:47:06.593Z (3 months ago)
- Topics: cafilter, fabric, jsi, react, react-natve, swift, uikit, uivisualeffectview
- Language: TypeScript
- Homepage:
- Size: 82.8 MB
- Stars: 24
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-ios-visual-effect-view
A small library to use `UIVisualEffectView` in `react-native`.
[`VisualEffectCustomFilterViewTest01Screen`](example/src/examples/CustomFilterViewTest01Screen.tsx)
[`VisualEffectCustomFilterViewTest01Screen`](example/src/examples/AnimatableCustomFilterViewTest02Screen.tsx)
[`VisualEffectCustomFilterViewTest02Screen`](example/src/examples/AnimatableCustomFilterViewTest02Screen.tsx)
## 🚧⚠️ Notices ⚠️🚧
📝 **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)).
📝 **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.
### Acknowledgements
very 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))
## A. Introduction
https://github.com/user-attachments/assets/74bf8afa-91ed-49d8-80aa-a17b8e7969b0
https://github.com/user-attachments/assets/16d2c2ee-5453-43ea-bd3f-aa8331fbcd58
* ❤️ Support for using `UIVisualEffectView` + all the system [`UIBlurEffectStyles`](https://github.com/dominicstop/react-native-ios-utilities/blob/master/src/constants/UIBlurEffectStyles.ts).
* 🧡 Support for using custom blur radius and effect intensity (percent).
* 💚 Support for animating the blur effect style + blur radius changes.
* 💙 Support for creating and using filters (WIP)
* 💜 Runs on the old + new architecture (paper + fabric).
### Testflight and Testing
The 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)).
Alternatively, 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)).
### Other Related Gifs
[`Experiment02ViewController.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/main/example/Routes/Experiment02ViewController.swift)
[`VisualEffectBlurTestViewController.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/main/example/Routes/VisualEffectBlurTestViewController.swift)
[`VisualEffectViewExperiment01ViewController.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/main/example/Routes/VisualEffectViewExperiment01ViewController.swift)
[`VisualEffectCustomFilterViewTest02Controller.swift`](https://github.com/dominicstop/VisualEffectBlurView/blob/main/example/Routes/VisualEffectCustomFilterViewTest02Controller.swift)
## B. Installation
**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).
```sh
# 1. install library + dependencies
npm install react-native-ios-visual-effect-view@next
npm install react-native-ios-utilities@next
# 2. then run pod install (uses auto-linking)
cd ios && pod install
```
### Updating
This 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).
```sh
# A. Either update this specific pod...
pod update VisualEffectBlurView DGSwiftUtilities
pod install --repo-update
# B. Or update all the pods
pod update
```
## C. Basic Usage
hello! please see [`BlurViewBasicUsage01`](example/src/examples/BlurViewBasicUsage01.tsx) for the full example
```js
// 📝 Note: for the sake of brevity, some of the code is omitted...
import { BlurView } from 'react-native-ios-visual-effect-view';
export function BlurViewBasicUsage01() {
return (
{'❤️\n🧡\n💛\n💚\n💙\n💜\n💖\n💃\n✨'}
);
}
```
## D. Documentation
TBA
## E. Examples
Please see the [examples directory](example/src/examples) for the full list of examples, demos and tests.
### `CustomFilterViewExample01`
**Summary**: Create a custom filter that darkens the views in the background, and applies a variable blur.
| Notes |
| :----------------------------------------------------------- |
| 1️⃣ — The `CustomFilterView.currentFilters` prop accepts a `CustomFilterConfig` object; this object is used create and configure the underlying `UIVisualEffectView` effects.
The `CustomFilterConfig` is comprised of several properties, but for this example we will be focusing on the `CustomFilterConfig.backgroundFilters` property (since it's required). |
| 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.
The backdrop layer is special in that it is able to composite views that are behind it, and apply filters to it.
📝 **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). |
| 3️⃣ — The `LayerFilterConfig` object is an tagged union type, with the `LayerFilterConfig.filterName` property being the "discriminant" that separates all the possible combinations.
The `filterName` defines what type of filter to use; different types of filters have different inputs to control the look/behavior of the desired effect.
In 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).
📝 **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. |
[🔗 Full Example](example/src/examples/CustomFilterViewExample01.tsx)
```jsx
export function CustomFilterViewExample01() {
return (
{emojiString}
{'Hello World'}
);
}
```
### `CustomFilterViewExample02`
**Summary**: TBA
[🔗 Full Example](example/src/examples/CustomFilterViewExample02.tsx)
```jsx
export function CustomFilterViewExample02() {
// ...
return (
{ /* ... */ }
);
}
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
## Misc and Contact
* 🐤 **Twitter/X**: [`@GoDominic`](https://x.com/GoDominic)
* 🦋 **Bluesky**: [`@godominic.bsky.social`](https://bsky.app/profile/godominic.bsky.social)
* 💌 **Email**: `[email protected]`
* 🌐 **Website**: [dominicgo.dev](https://dominicgo.dev)
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)