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: about 1 month 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 (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-20T00:13:34.000Z (about 2 months ago)
• Last Synced: 2024-09-30T06:06:45.127Z (about 1 month ago)
• Topics: cafilter, fabric, jsi, react, react-natve, swift, uikit, uivisualeffectview
• Language: TypeScript
• Homepage:
• Size: 23.7 MB
• Stars: 5
• 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 simple library to use `UIVisualEffectView` in `react-native`.







## 🚧⚠️  Work in Progress ⚠️🚧

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

The initial version of this library  (i.e. version `0.x`) was made possible through a generous `$3,250` sponsorship by [natew](https://github.com/natew) + [tamagui](https://github.com/tamagui/tamagui) over the course of ≈ 3.5 months (from: `05/27/24` to `09/24`) 🐦✨




very special thanks to: [junzhengca](https://github.com/junzhengca), [brentvatne](https://github.com/brentvatne), and [expo](https://github.com/expo) for sponsoring my work 🥺 (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

* ❤️ 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).





## 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 [`RNIBlurViewBasicUsage01`](example/src/examples/RNIBlurViewBasicUsage01.tsx) for the full example

```js

// 📝 Note: for the sake of brevity, some of the code is omitted...

import { RNIBlurView } from 'react-native-ios-visual-effect-view';

export function RNIBlurViewBasicUsage01() {

  return (

    

      

        {'❤️\n🧡\n💛\n💚\n💙\n💜\n💖\n💃\n✨'}

      

      

    

  );

}

```







## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.





## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)