react-native-ios-visual-effect-view

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,750 sponsorship by natew + tamagui over the course of 4 months (from: 05/27/24 to 09/30/24) 🐦✨

very special thanks to: junzhengca, brentvatne, expo, EvanBacon, corasan, lauridskern, and ronintechnologies for becoming a monthly sponsor and fobos531 for being a one time sponsor 🥺 (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}
        blurMode={{
          mode: 'blurEffectSystem',
          blurEffectStyle: 'prominent',
        }}
        animationConfig={{
          duration: 1,
          mode: 'presetCurve',
          curve: 'easeOut',
        }}
        animationDelay={1}
      />
    </View>
  );
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library