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).
MIT License
A simple library to use UIVisualEffectView
in react-native
.
This library + documentation is currently not finished yet. For now, please browse through examples directory to get a rough idea on how to use this library. Jump to basic usage section for example code + gif.
The initial version of this library (i.e. version 0.x
) was made possible through a generous $3,250
sponsorship by natew + tamagui over the course of β 3.5 months (from: 05/27/24
to 09/24
) π¦β¨
very special thanks to: junzhengca, brentvatne, and expo for sponsoring my work π₯Ί (if you have the means to do so, please considering sponsoring here)
https://github.com/user-attachments/assets/74bf8afa-91ed-49d8-80aa-a17b8e7969b0
UIVisualEffectView
+ all the system UIBlurEffectStyles
.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
.
# 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
This library has cocoapods dependency to VisualEffectBlurView
and DGSwiftUtilities
, so you may need to update them separately (as needed).
# A. Either update this specific pod...
pod update VisualEffectBlurView DGSwiftUtilities
pod install --repo-update
# B. Or update all the pods
pod update
hello! please see RNIBlurViewBasicUsage01
for the full example
// π 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 (
<View style={styles.container}>
<Text style={styles.label}>
{'β€οΈ\nπ§‘\nπ\nπ\nπ\nπ\nπ\nπ\nβ¨'}
</Text>
<RNIBlurView
style={styles.effectOverlay}
blurConfig={{
mode: 'standard',
blurEffectStyle: 'prominent',
}}
animationConfig={{
duration: 1,
mode: 'presetCurve',
curve: 'easeOut',
}}
animationDelay={1}
/>
</View>
);
}
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library