expo-blur 10.0.3 → 11.2.0

package/CHANGELOG.md

@@ -10,13 +10,26 @@
 
 ### 💡 Others
 
-## 10.0.3 — 2021-10-21
+## 11.2.0 — 2022-07-07
 
 _This version does not introduce any user-facing changes._
 
-## 10.0.2 — 2021-10-15
+## 11.1.0 — 2022-04-18
 
-_This version does not introduce any user-facing changes._
+### 🐛 Bug fixes
+
+- Fixed the component not rendering correctly when the border radius style is set. ([#16671](https://github.com/expo/expo/pull/16671) by [@tsapeta](https://github.com/tsapeta))
+
+## 11.0.0 — 2021-12-03
+
+### 🛠 Breaking changes
+
+- On iOS replaced non-working `alpha`-based blur mechanism with a new one basing on `UIViewPropertyAnimator`. ([#14946](https://github.com/expo/expo/pull/14946) by [@bbarthec](https://github.com/bbarthec))
+- Renamed `BlurProps` to `BlurViewProps` to align with React Native's types naming convention. ([#14946](https://github.com/expo/expo/pull/14946) by [@bbarthec](https://github.com/bbarthec))
+
+### 🐛 Bug fixes
+
+- On iOS fixed `intensity` property not blurring text content properly. ([#14946](https://github.com/expo/expo/pull/14946) by [@bbarthec](https://github.com/bbarthec))
 
 ## 10.0.1 — 2021-10-01
 

package/README.md

@@ -4,16 +4,16 @@ A component that renders a native blur view on iOS and falls back to a semi-tran
 
 # API documentation
 
-- [Documentation for the master branch](https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/sdk/blur-view.md)
-- [Documentation for the latest stable release](https://docs.expo.io/versions/latest/sdk/blur-view/)
+- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/blur-view.md)
+- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/blur-view/)
 
 # Installation in managed Expo projects
 
-For managed [managed](https://docs.expo.io/versions/latest/introduction/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](https://docs.expo.io/versions/latest/sdk/blur-view/).
+For [managed](https://docs.expo.dev/versions/latest/introduction/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/blur-view/).
 
 # Installation in bare React Native projects
 
-For bare React Native projects, you must ensure that you have [installed and configured the `react-native-unimodules` package](https://github.com/expo/expo/tree/master/packages/react-native-unimodules) before continuing.
+For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
 
 ### Add the package to your npm dependencies
 

package/build/BlurView.android.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BlurProps } from './BlurView.types';
-declare class BlurView extends React.Component<BlurProps> {
+import { BlurViewProps } from './BlurView.types';
+export default class BlurView extends React.Component<BlurViewProps> {
     render(): JSX.Element;
 }
-export default BlurView;
+//# sourceMappingURL=BlurView.android.d.ts.map

package/build/BlurView.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurView.android.d.ts","sourceRoot":"","sources":["../src/BlurView.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAClE,MAAM;CAKP"}

package/build/BlurView.android.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import getBackgroundColor from './getBackgroundColor';
-class BlurView extends React.Component {
+export default class BlurView extends React.Component {
     render() {
-        const { tint = 'default', intensity = 100, style, ...props } = this.props;
+        const { tint = 'default', intensity = 50, style, ...props } = this.props;
         const backgroundColor = getBackgroundColor(intensity, tint);
         return React.createElement(View, { ...props, style: [style, { backgroundColor }] });
     }
 }
-export default BlurView;
 //# sourceMappingURL=BlurView.android.js.map

package/build/BlurView.android.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlurView.android.js","sourceRoot":"","sources":["../src/BlurView.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,QAAS,SAAQ,KAAK,CAAC,SAAoB;IAC/C,MAAM;QACJ,MAAM,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1E,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QAC5D,OAAO,oBAAC,IAAI,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,eAAe,EAAE,CAAC,GAAI,CAAC;IAClE,CAAC;CACF;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { BlurProps } from './BlurView.types';\nimport getBackgroundColor from './getBackgroundColor';\n\nclass BlurView extends React.Component<BlurProps> {\n  render() {\n    const { tint = 'default', intensity = 100, style, ...props } = this.props;\n    const backgroundColor = getBackgroundColor(intensity, tint);\n    return <View {...props} style={[style, { backgroundColor }]} />;\n  }\n}\n\nexport default BlurView;\n"]}
+{"version":3,"file":"BlurView.android.js","sourceRoot":"","sources":["../src/BlurView.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAwB;IAClE,MAAM;QACJ,MAAM,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACzE,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QAC5D,OAAO,oBAAC,IAAI,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,eAAe,EAAE,CAAC,GAAI,CAAC;IAClE,CAAC;CACF","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { BlurViewProps } from './BlurView.types';\nimport getBackgroundColor from './getBackgroundColor';\n\nexport default class BlurView extends React.Component<BlurViewProps> {\n  render() {\n    const { tint = 'default', intensity = 50, style, ...props } = this.props;\n    const backgroundColor = getBackgroundColor(intensity, tint);\n    return <View {...props} style={[style, { backgroundColor }]} />;\n  }\n}\n"]}

package/build/BlurView.d.ts

@@ -1,12 +1,8 @@
-import * as React from 'react';
-import { BlurProps, BlurTint, ComponentOrHandle } from './BlurView.types';
-export default class BlurView extends React.Component<BlurProps> {
-    static defaultProps: {
-        tint: BlurTint;
-        intensity: number;
-    };
-    _root: ComponentOrHandle;
-    _setNativeRef: (ref: ComponentOrHandle) => void;
-    setNativeProps: (nativeProps: any) => void;
-    render(): JSX.Element;
-}
+import React from 'react';
+import { View } from 'react-native';
+declare const BlurViewWithForwardedRef: React.ForwardRefExoticComponent<{
+    tint?: import("./BlurView.types").BlurTint | undefined;
+    intensity?: number | undefined;
+} & import("react-native").ViewProps & React.RefAttributes<View>>;
+export default BlurViewWithForwardedRef;
+//# sourceMappingURL=BlurView.d.ts.map

package/build/BlurView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../src/BlurView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAA8B,MAAM,cAAc,CAAC;AAiFhE,QAAA,MAAM,wBAAwB;;;iEAE5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}

package/build/BlurView.js

@@ -1,26 +1,54 @@
 import { NativeModulesProxy, requireNativeViewManager } from 'expo-modules-core';
-import * as React from 'react';
-import { findNodeHandle, View, StyleSheet } from 'react-native';
-export default class BlurView extends React.Component {
-    static defaultProps = {
-        tint: 'default',
-        intensity: 50,
-    };
-    _root = null;
-    _setNativeRef = (ref) => {
-        this._root = ref;
-    };
-    setNativeProps = (nativeProps) => {
-        if (this._root) {
-            NativeModulesProxy.ExpoBlurViewManager.updateProps(nativeProps, findNodeHandle(this._root));
+import React from 'react';
+import { View, StyleSheet, findNodeHandle } from 'react-native';
+class BlurView extends React.Component {
+    blurViewRef = React.createRef();
+    /**
+     * This component is a composition of the two components, but from the outside it's
+     * just a simple View with additional properties. To properly handle `setNativeProps`
+     * method (used when animating props), we need to properly separate `ViewProps` from `BlurViewProps`
+     * and pass them to the proper underlying views.
+     *
+     * This method handles the native view reference obtained from the parent View component
+     * and overrides it's original `setNativeProps` method that is available as it's property.
+     * When the `NativeBlurView` native ref is available `BlurView`-only props are forwarded
+     * to this view using `setNativeProps` method exposed by the native runtime.
+     */
+    onRefChange = (view) => {
+        if (!view) {
+            return;
+        }
+        // Save the reference to the original method already bound to the proper calling context
+        const originalSetNativeProps = view.setNativeProps.bind(view);
+        // Override `setNativeProps` (https://reactnative.dev/docs/animations#setnativeprops)
+        view.setNativeProps = ({ tint, intensity, ...nativeProps }) => {
+            // Call the original method with all View-based props
+            view && originalSetNativeProps(nativeProps);
+            // Invoke `setNativeProps` native expo method defined by `ExpoBlurViewManager`
+            this.blurViewRef.current &&
+                NativeModulesProxy.ExpoBlurViewManager.setNativeProps({ tint, intensity }, findNodeHandle(this.blurViewRef.current));
+        };
+        // mimic `forwardedRef` logic
+        if (typeof this.props.forwardedRef === 'function') {
+            this.props.forwardedRef(view);
+        }
+        else if (this.props.forwardedRef) {
+            this.props.forwardedRef.current = view;
         }
     };
     render() {
-        const { tint, intensity, style, children, ...props } = this.props;
-        return (React.createElement(View, { ...props, style: [style, { backgroundColor: 'transparent' }] },
-            React.createElement(NativeBlurView, { tint: tint, intensity: intensity, ref: this._setNativeRef, style: StyleSheet.absoluteFill }),
+        const { tint = 'default', intensity = 50, style, children, forwardedRef, ...props } = this.props;
+        return (React.createElement(View, { ...props, ref: this.onRefChange, style: [styles.container, style] },
+            React.createElement(NativeBlurView, { ref: this.blurViewRef, tint: tint, intensity: intensity, style: StyleSheet.absoluteFill }),
             children));
     }
 }
+const styles = StyleSheet.create({
+    container: { backgroundColor: 'transparent' },
+});
 const NativeBlurView = requireNativeViewManager('ExpoBlurView');
+// This `forwardedRef` mechanism is necessary to make this component work properly
+// with React's `ref` prop and to react to props updates as expected.
+const BlurViewWithForwardedRef = React.forwardRef((props, forwardRef) => (React.createElement(BlurView, { ...props, forwardedRef: forwardRef })));
+export default BlurViewWithForwardedRef;
 //# sourceMappingURL=BlurView.js.map

package/build/BlurView.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlurView.js","sourceRoot":"","sources":["../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAIhE,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAoB;IAC9D,MAAM,CAAC,YAAY,GAAG;QACpB,IAAI,EAAE,SAAqB;QAC3B,SAAS,EAAE,EAAE;KACd,CAAC;IAEF,KAAK,GAAsB,IAAI,CAAC;IAEhC,aAAa,GAAG,CAAC,GAAsB,EAAE,EAAE;QACzC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;IACnB,CAAC,CAAC;IAEF,cAAc,GAAG,CAAC,WAAW,EAAE,EAAE;QAC/B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,kBAAkB,CAAC,mBAAmB,CAAC,WAAW,CAAC,WAAW,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;SAC7F;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAClE,OAAO,CACL,oBAAC,IAAI,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;YACjE,oBAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,aAAa,EACvB,KAAK,EAAE,UAAU,CAAC,YAAY,GAC9B;YACD,QAAQ,CACJ,CACR,CAAC;IACJ,CAAC;;AAGH,MAAM,cAAc,GAAG,wBAAwB,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import { NativeModulesProxy, requireNativeViewManager } from 'expo-modules-core';\nimport * as React from 'react';\nimport { findNodeHandle, View, StyleSheet } from 'react-native';\n\nimport { BlurProps, BlurTint, ComponentOrHandle } from './BlurView.types';\n\nexport default class BlurView extends React.Component<BlurProps> {\n  static defaultProps = {\n    tint: 'default' as BlurTint,\n    intensity: 50,\n  };\n\n  _root: ComponentOrHandle = null;\n\n  _setNativeRef = (ref: ComponentOrHandle) => {\n    this._root = ref;\n  };\n\n  setNativeProps = (nativeProps) => {\n    if (this._root) {\n      NativeModulesProxy.ExpoBlurViewManager.updateProps(nativeProps, findNodeHandle(this._root));\n    }\n  };\n\n  render() {\n    const { tint, intensity, style, children, ...props } = this.props;\n    return (\n      <View {...props} style={[style, { backgroundColor: 'transparent' }]}>\n        <NativeBlurView\n          tint={tint}\n          intensity={intensity}\n          ref={this._setNativeRef}\n          style={StyleSheet.absoluteFill}\n        />\n        {children}\n      </View>\n    );\n  }\n}\n\nconst NativeBlurView = requireNativeViewManager('ExpoBlurView');\n"]}
+{"version":3,"file":"BlurView.js","sourceRoot":"","sources":["../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQhE,MAAM,QAAS,SAAQ,KAAK,CAAC,SAAmD;IACtE,WAAW,GAAG,KAAK,CAAC,SAAS,EAAQ,CAAC;IAE9C;;;;;;;;;;OAUG;IACK,WAAW,GAAG,CAAC,IAAiB,EAAE,EAAE;QAC1C,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QAED,wFAAwF;QACxF,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE9D,qFAAqF;QACrF,IAAI,CAAC,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,WAAW,EAAiB,EAAE,EAAE;YAC3E,qDAAqD;YACrD,IAAI,IAAI,sBAAsB,CAAC,WAAW,CAAC,CAAC;YAC5C,8EAA8E;YAC9E,IAAI,CAAC,WAAW,CAAC,OAAO;gBACtB,kBAAkB,CAAC,mBAAmB,CAAC,cAAc,CACnD,EAAE,IAAI,EAAE,SAAS,EAAE,EACnB,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CACzC,CAAC;QACN,CAAC,CAAC;QAEF,6BAA6B;QAC7B,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,UAAU,EAAE;YACjD,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC/B;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;YAClC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;SACxC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,EACJ,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,EAAE,EACd,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,GAAG,IAAI,CAAC,KAAK,CAAC;QACf,OAAO,CACL,oBAAC,IAAI,OAAK,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC;YACtE,oBAAC,cAAc,IACb,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAU,CAAC,YAAY,GAC9B;YACD,QAAQ,CACJ,CACR,CAAC;IACJ,CAAC;CACF;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE;CAC9C,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,wBAAwB,CAAC,cAAc,CAAC,CAAC;AAEhE,kFAAkF;AAClF,qEAAqE;AACrE,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CAAsB,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC,CAC5F,oBAAC,QAAQ,OAAK,KAAK,EAAE,YAAY,EAAE,UAAU,GAAI,CAClD,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { NativeModulesProxy, requireNativeViewManager } from 'expo-modules-core';\nimport React from 'react';\nimport { View, StyleSheet, findNodeHandle } from 'react-native';\n\nimport { BlurViewProps } from './BlurView.types';\n\ntype BlurViewForwardedRefProp = {\n  forwardedRef: React.ForwardedRef<View>;\n};\n\nclass BlurView extends React.Component<BlurViewProps & BlurViewForwardedRefProp> {\n  private blurViewRef = React.createRef<View>();\n\n  /**\n   * This component is a composition of the two components, but from the outside it's\n   * just a simple View with additional properties. To properly handle `setNativeProps`\n   * method (used when animating props), we need to properly separate `ViewProps` from `BlurViewProps`\n   * and pass them to the proper underlying views.\n   *\n   * This method handles the native view reference obtained from the parent View component\n   * and overrides it's original `setNativeProps` method that is available as it's property.\n   * When the `NativeBlurView` native ref is available `BlurView`-only props are forwarded\n   * to this view using `setNativeProps` method exposed by the native runtime.\n   */\n  private onRefChange = (view: View | null) => {\n    if (!view) {\n      return;\n    }\n\n    // Save the reference to the original method already bound to the proper calling context\n    const originalSetNativeProps = view.setNativeProps.bind(view);\n\n    // Override `setNativeProps` (https://reactnative.dev/docs/animations#setnativeprops)\n    view.setNativeProps = ({ tint, intensity, ...nativeProps }: BlurViewProps) => {\n      // Call the original method with all View-based props\n      view && originalSetNativeProps(nativeProps);\n      // Invoke `setNativeProps` native expo method defined by `ExpoBlurViewManager`\n      this.blurViewRef.current &&\n        NativeModulesProxy.ExpoBlurViewManager.setNativeProps(\n          { tint, intensity },\n          findNodeHandle(this.blurViewRef.current)\n        );\n    };\n\n    // mimic `forwardedRef` logic\n    if (typeof this.props.forwardedRef === 'function') {\n      this.props.forwardedRef(view);\n    } else if (this.props.forwardedRef) {\n      this.props.forwardedRef.current = view;\n    }\n  };\n\n  render() {\n    const {\n      tint = 'default',\n      intensity = 50,\n      style,\n      children,\n      forwardedRef,\n      ...props\n    } = this.props;\n    return (\n      <View {...props} ref={this.onRefChange} style={[styles.container, style]}>\n        <NativeBlurView\n          ref={this.blurViewRef}\n          tint={tint}\n          intensity={intensity}\n          style={StyleSheet.absoluteFill}\n        />\n        {children}\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: { backgroundColor: 'transparent' },\n});\n\nconst NativeBlurView = requireNativeViewManager('ExpoBlurView');\n\n// This `forwardedRef` mechanism is necessary to make this component work properly\n// with React's `ref` prop and to react to props updates as expected.\nconst BlurViewWithForwardedRef = React.forwardRef<View, BlurViewProps>((props, forwardRef) => (\n  <BlurView {...props} forwardedRef={forwardRef} />\n));\n\nexport default BlurViewWithForwardedRef;\n"]}

package/build/BlurView.types.d.ts

@@ -1,15 +1,19 @@
-import * as React from 'react';
-import { View } from 'react-native';
-export declare type BlurProps = {
+import { ViewProps } from 'react-native';
+export declare type BlurViewProps = {
     /**
      * A tint mode which will be applied to the view.
      * @default 'default'
      */
-    tint: BlurTint;
+    tint?: BlurTint;
     /**
      * A number from `1` to `100` to control the intensity of the blur effect.
+     *
+     * You can animate this property using `Animated API` from React Native or using `react-native-reanimated`.
+     * > Animating this property using `Animated API` from React Native with `setNativeDriver: true` does not work.
+     *
+     * @default 50
      */
-    intensity: number;
-} & React.ComponentProps<typeof View>;
+    intensity?: number;
+} & ViewProps;
 export declare type BlurTint = 'light' | 'dark' | 'default';
-export declare type ComponentOrHandle = null | number | React.Component<any, any> | React.ComponentClass<any>;
+//# sourceMappingURL=BlurView.types.d.ts.map

package/build/BlurView.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurView.types.d.ts","sourceRoot":"","sources":["../src/BlurView.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,oBAAY,aAAa,GAAG;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,SAAS,CAAC;AAEd,oBAAY,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC"}

package/build/BlurView.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlurView.types.js","sourceRoot":"","sources":["../src/BlurView.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nexport type BlurProps = {\n  /**\n   * A tint mode which will be applied to the view.\n   * @default 'default'\n   */\n  tint: BlurTint;\n  /**\n   * A number from `1` to `100` to control the intensity of the blur effect.\n   */\n  intensity: number;\n} & React.ComponentProps<typeof View>;\n\nexport type BlurTint = 'light' | 'dark' | 'default';\n\nexport type ComponentOrHandle =\n  | null\n  | number\n  | React.Component<any, any>\n  | React.ComponentClass<any>;\n"]}
+{"version":3,"file":"BlurView.types.js","sourceRoot":"","sources":["../src/BlurView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewProps } from 'react-native';\n\nexport type BlurViewProps = {\n  /**\n   * A tint mode which will be applied to the view.\n   * @default 'default'\n   */\n  tint?: BlurTint;\n  /**\n   * A number from `1` to `100` to control the intensity of the blur effect.\n   *\n   * You can animate this property using `Animated API` from React Native or using `react-native-reanimated`.\n   * > Animating this property using `Animated API` from React Native with `setNativeDriver: true` does not work.\n   *\n   * @default 50\n   */\n  intensity?: number;\n} & ViewProps;\n\nexport type BlurTint = 'light' | 'dark' | 'default';\n"]}

package/build/BlurView.web.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BlurProps } from './BlurView.types';
-declare class BlurView extends React.Component<BlurProps> {
+import { BlurViewProps } from './BlurView.types';
+export default class BlurView extends React.Component<BlurViewProps> {
     render(): JSX.Element;
 }
-export default BlurView;
+//# sourceMappingURL=BlurView.web.d.ts.map

package/build/BlurView.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurView.web.d.ts","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAClE,MAAM;CAKP"}

package/build/BlurView.web.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import getBackgroundColor from './getBackgroundColor';
-class BlurView extends React.Component {
+export default class BlurView extends React.Component {
     render() {
         const { tint = 'default', intensity = 50, style, ...props } = this.props;
         const blurStyle = getBlurStyle({ tint, intensity: Math.min(intensity, 100) });
@@ -24,5 +24,4 @@ function getBlurStyle({ intensity, tint }) {
     }
     return style;
 }
-export default BlurView;
 //# sourceMappingURL=BlurView.web.js.map

package/build/BlurView.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlurView.web.js","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,QAAS,SAAQ,KAAK,CAAC,SAAoB;IAC/C,MAAM;QACJ,MAAM,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACzE,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9E,OAAO,oBAAC,IAAI,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,GAAI,CAAC;IACxD,CAAC;CACF;AAED,SAAS,eAAe;IACtB,gEAAgE;IAChE,yFAAyF;IACzF,OAAO,CACL,OAAO,GAAG,KAAK,WAAW;QAC1B,CAAC,GAAG,CAAC,QAAQ,CAAC,yBAAyB,EAAE,WAAW,CAAC;YACnD,GAAG,CAAC,QAAQ,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAChD,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE;IACvC,MAAM,KAAK,GAA2B;QACpC,eAAe,EAAE,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC;KACrD,CAAC;IAEF,IAAI,eAAe,EAAE,EAAE;QACrB,KAAK,CAAC,cAAc,GAAG,uBAAuB,SAAS,GAAG,GAAG,KAAK,CAAC;KACpE;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { BlurProps } from './BlurView.types';\nimport getBackgroundColor from './getBackgroundColor';\n\nclass BlurView extends React.Component<BlurProps> {\n  render() {\n    const { tint = 'default', intensity = 50, style, ...props } = this.props;\n    const blurStyle = getBlurStyle({ tint, intensity: Math.min(intensity, 100) });\n    return <View {...props} style={[style, blurStyle]} />;\n  }\n}\n\nfunction isBlurSupported(): boolean {\n  // https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports\n  // https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility\n  return (\n    typeof CSS !== 'undefined' &&\n    (CSS.supports('-webkit-backdrop-filter', 'blur(1px)') ||\n      CSS.supports('backdrop-filter', 'blur(1px)'))\n  );\n}\n\nfunction getBlurStyle({ intensity, tint }): Record<string, string> {\n  const style: Record<string, string> = {\n    backgroundColor: getBackgroundColor(intensity, tint),\n  };\n\n  if (isBlurSupported()) {\n    style.backdropFilter = `saturate(180%) blur(${intensity * 0.2}px)`;\n  }\n\n  return style;\n}\n\nexport default BlurView;\n"]}
+{"version":3,"file":"BlurView.web.js","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAwB;IAClE,MAAM;QACJ,MAAM,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACzE,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9E,OAAO,oBAAC,IAAI,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,GAAI,CAAC;IACxD,CAAC;CACF;AAED,SAAS,eAAe;IACtB,gEAAgE;IAChE,yFAAyF;IACzF,OAAO,CACL,OAAO,GAAG,KAAK,WAAW;QAC1B,CAAC,GAAG,CAAC,QAAQ,CAAC,yBAAyB,EAAE,WAAW,CAAC;YACnD,GAAG,CAAC,QAAQ,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAChD,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE;IACvC,MAAM,KAAK,GAA2B;QACpC,eAAe,EAAE,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC;KACrD,CAAC;IAEF,IAAI,eAAe,EAAE,EAAE;QACrB,KAAK,CAAC,cAAc,GAAG,uBAAuB,SAAS,GAAG,GAAG,KAAK,CAAC;KACpE;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { BlurViewProps } from './BlurView.types';\nimport getBackgroundColor from './getBackgroundColor';\n\nexport default class BlurView extends React.Component<BlurViewProps> {\n  render() {\n    const { tint = 'default', intensity = 50, style, ...props } = this.props;\n    const blurStyle = getBlurStyle({ tint, intensity: Math.min(intensity, 100) });\n    return <View {...props} style={[style, blurStyle]} />;\n  }\n}\n\nfunction isBlurSupported(): boolean {\n  // https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports\n  // https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility\n  return (\n    typeof CSS !== 'undefined' &&\n    (CSS.supports('-webkit-backdrop-filter', 'blur(1px)') ||\n      CSS.supports('backdrop-filter', 'blur(1px)'))\n  );\n}\n\nfunction getBlurStyle({ intensity, tint }): Record<string, string> {\n  const style: Record<string, string> = {\n    backgroundColor: getBackgroundColor(intensity, tint),\n  };\n\n  if (isBlurSupported()) {\n    style.backdropFilter = `saturate(180%) blur(${intensity * 0.2}px)`;\n  }\n\n  return style;\n}\n"]}

package/build/getBackgroundColor.d.ts

@@ -1,2 +1,3 @@
 import { BlurTint } from './BlurView.types';
 export default function getBackgroundColor(intensity: number, tint: BlurTint): string;
+//# sourceMappingURL=getBackgroundColor.d.ts.map

package/build/getBackgroundColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBackgroundColor.d.ts","sourceRoot":"","sources":["../src/getBackgroundColor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAcpF"}

package/build/index.d.ts

@@ -1,2 +1,3 @@
 export { default as BlurView } from './BlurView';
-export { BlurTint, BlurProps } from './BlurView.types';
+export { BlurTint, BlurViewProps } from './BlurView.types';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as BlurView } from './BlurView';\nexport { BlurTint, BlurProps } from './BlurView.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as BlurView } from './BlurView';\nexport { BlurTint, BlurViewProps } from './BlurView.types';\n"]}

package/ios/EXBlur/BlurEffectView.swift

@@ -0,0 +1,83 @@
+// Copyright 2015-present 650 Industries. All rights reserved.
+
+import UIKit
+
+/**
+ This class is based on https://gist.github.com/darrarski/29a2a4515508e385c90b3ffe6f975df7
+ */
+final class BlurEffectView: UIVisualEffectView {
+  @Clamping(lowerBound: 0.01, upperBound: 1)
+  var intensity: Double = 0.5 {
+    didSet {
+      setNeedsDisplay()
+    }
+  }
+
+  @Containing(values: ["default", "light", "dark"])
+  var tint = "default" {
+    didSet {
+      visualEffect = UIBlurEffect(style: blurEffectStyleFrom(tint))
+    }
+  }
+
+  private var visualEffect: UIVisualEffect = UIBlurEffect(style: blurEffectStyleFrom("default")) {
+    didSet {
+      setNeedsDisplay()
+    }
+  }
+  private var animator: UIViewPropertyAnimator?
+
+  init() {
+    super.init(effect: nil)
+  }
+
+  required init?(coder aDecoder: NSCoder) { nil }
+
+  deinit {
+    animator?.stopAnimation(true)
+  }
+
+  override func draw(_ rect: CGRect) {
+    super.draw(rect)
+    effect = nil
+    animator?.stopAnimation(true)
+    animator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [unowned self] in
+      self.effect = visualEffect
+    }
+    animator?.fractionComplete = CGFloat(intensity)
+  }
+}
+
+private func blurEffectStyleFrom(_ tint: String) -> UIBlurEffect.Style {
+  switch tint {
+  case "light": return .extraLight
+  case "dark": return .dark
+  case "default": return .light
+  default: return .dark
+  }
+}
+
+/**
+ Property wrapper clamping the value between an upper and lower bound
+ */
+@propertyWrapper
+struct Clamping<Value: Comparable> {
+  var wrappedValue: Value
+
+  init(wrappedValue: Value, lowerBound: Value, upperBound: Value) {
+    self.wrappedValue = max(lowerBound, min(upperBound, wrappedValue))
+  }
+}
+
+/**
+ Property wrapper ensuring that the value is contained in list of valid values
+ */
+@propertyWrapper
+struct Containing<Value: Equatable> {
+  var wrappedValue: Value
+
+  init(wrappedValue: Value, values: [Value]) {
+    let isValueValid = values.contains(wrappedValue)
+    self.wrappedValue = isValueValid ? wrappedValue : values.first!
+  }
+}

package/ios/EXBlur/BlurView.swift

@@ -0,0 +1,31 @@
+// Copyright 2015-present 650 Industries. All rights reserved.
+
+import UIKit
+import ExpoModulesCore
+
+@objc(EXBlurView)
+public class BlurView: ExpoView {
+  private var blurEffectView: BlurEffectView
+
+  override init(frame: CGRect) {
+    blurEffectView = BlurEffectView()
+    super.init(frame: frame)
+
+    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    clipsToBounds = true
+
+    addSubview(blurEffectView)
+  }
+
+  required init?(coder: NSCoder) { nil }
+
+  @objc
+  public func setTint(_ tint: String) {
+    blurEffectView.tint = tint
+  }
+
+  @objc
+  public func setIntensity(_ intensity: Double) {
+    blurEffectView.intensity = intensity
+  }
+}

package/ios/EXBlur/EXBlurViewManager.m

@@ -1,9 +1,14 @@
 // Copyright 2016-present 650 Industries. All rights reserved.
 
-#import <EXBlur/EXBlurView.h>
 #import <EXBlur/EXBlurViewManager.h>
 #import <ExpoModulesCore/EXUIManager.h>
 
+#if __has_include(<EXBlur/EXBlur-Swift.h>)
+#import <EXBlur/EXBlur-Swift.h>
+#else
+#import "EXBlur-Swift.h"
+#endif
+
 @interface EXBlurViewManager ()
 
 @property (weak, nonatomic) EXModuleRegistry *moduleRegistry;
@@ -20,7 +25,7 @@ EX_EXPORT_MODULE(ExpoBlurViewManager);
 
 - (UIView *)view
 {
-  return [[EXBlurView alloc] init];
+  return [EXBlurView new];
 }
 
 - (NSString *)viewName
@@ -31,39 +36,28 @@ EX_EXPORT_MODULE(ExpoBlurViewManager);
 EX_VIEW_PROPERTY(tint, NSString *, EXBlurView)
 {
   [view setTint:value];
-  [view didSetProps:@[@"tint"]];
 }
 
 EX_VIEW_PROPERTY(intensity, NSNumber *, EXBlurView)
 {
-  [view setIntensity:value];
-  [view didSetProps:@[@"intensity"]];
+  [view setIntensity:[value doubleValue] / 100];
 }
 
-EX_EXPORT_METHOD_AS(updateProps,
-                    updateProps:(NSDictionary *)props
-                    onViewOfId:(id)viewId
-                    resolve:(EXPromiseResolveBlock)resolver
-                    reject:(EXPromiseRejectBlock)rejecter)
+EX_EXPORT_METHOD_AS(setNativeProps,
+                    setNativeProps:(NSDictionary *)nativeProps
+                    forViewWithTag:(id)viewTag
+                    resolver:(EXPromiseResolveBlock)resolve
+                    rejecter:(EXPromiseRejectBlock)reject)
 {
   [[_moduleRegistry getModuleImplementingProtocol:@protocol(EXUIManager)] executeUIBlock:^(id view) {
     if ([view isKindOfClass:[EXBlurView class]]) {
       EXBlurView *blurView = view;
-      NSMutableArray *changedProps = [NSMutableArray new];
-      if (props[@"intensity"] && ![props[@"intensity"] isEqual:blurView.intensity]) {
-        [blurView setIntensity:props[@"intensity"]];
-        [changedProps addObject:@"intensity"];
-      }
-      if (props[@"tint"] && ![props[@"tint"] isEqual:blurView.tint]) {
-        [blurView setTint:props[@"tint"]];
-        [changedProps addObject:@"tint"];
-      }
-      [blurView didSetProps:changedProps];
-      resolver([NSNull null]);
+      if (nativeProps[@"intensity"]) { [blurView setIntensity:[nativeProps[@"intensity"] floatValue] / 100]; }
+      if (nativeProps[@"tint"]) { [blurView setTint:nativeProps[@"tint"]]; }
     } else {
-      rejecter(@"E_INVALID_VIEW", @"Invalid view found for requested tag", nil);
+      reject(@"E_INVALID_VIEW", [NSString stringWithFormat:@"Invalid view returned from registry, expected EXBlurView, got: %@", view], nil);
     }
-  } forView:viewId ofClass:[EXBlurView class]];
+  } forView:viewTag ofClass:[EXBlurView class]];
 }
 
 @end

package/ios/EXBlur.podspec

@@ -20,6 +20,6 @@ Pod::Spec.new do |s|
     s.source_files = "#{s.name}/**/*.h"
     s.vendored_frameworks = "#{s.name}.xcframework"
   else
-    s.source_files = "#{s.name}/**/*.{h,m}"
+    s.source_files = "#{s.name}/**/*.{h,m,swift}"
   end
 end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-blur",
-  "version": "10.0.3",
+  "version": "11.2.0",
   "description": "A component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -33,11 +33,12 @@
   "author": "650 Industries, Inc.",
   "license": "MIT",
   "homepage": "https://docs.expo.dev/versions/latest/sdk/blur-view/",
-  "dependencies": {
-    "expo-modules-core": "~0.4.4"
-  },
+  "dependencies": {},
   "devDependencies": {
     "expo-module-scripts": "^2.0.0"
   },
-  "gitHead": "4fa0497a180ae707fa860cb03858630ab7af19f4"
+  "peerDependencies": {
+    "expo": "*"
+  },
+  "gitHead": "e893ff2b01e108cf246cec02318c0df9d6bc603c"
 }

package/src/BlurView.android.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-import { BlurProps } from './BlurView.types';
+import { BlurViewProps } from './BlurView.types';
 import getBackgroundColor from './getBackgroundColor';
 
-class BlurView extends React.Component<BlurProps> {
+export default class BlurView extends React.Component<BlurViewProps> {
   render() {
-    const { tint = 'default', intensity = 100, style, ...props } = this.props;
+    const { tint = 'default', intensity = 50, style, ...props } = this.props;
     const backgroundColor = getBackgroundColor(intensity, tint);
     return <View {...props} style={[style, { backgroundColor }]} />;
   }
 }
-
-export default BlurView;