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 directory to get a rough idea on how to use this library. Jump to basic usage section 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 + 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)

A. Introduction

https://github.com/user-attachments/assets/74bf8afa-91ed-49d8-80aa-a17b8e7969b0

❤️ Support for using UIVisualEffectView + all the system UIBlurEffectStyles.
🧡 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.

# 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 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

C. Basic Usage

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>
  );
}