expo-blur 12.0.1 → 12.2.0

package/CHANGELOG.md

@@ -10,6 +10,18 @@
 
 ### 💡 Others
 
+## 12.2.0 — 2023-02-03
+
+### 🐛 Bug fixes
+
+- Add `-webkit-backdrop-filter` to support blurring on Safari. ([#21003](https://github.com/expo/expo/pull/21003) by [@EvanBacon](https://github.com/EvanBacon))
+
+## 12.1.0 — 2022-12-30
+
+### 🎉 New features
+
+- Migrated iOS codebase to Swift and the new Expo modules API. ([#19786](https://github.com/expo/expo/pull/19786) by [@tsapeta](https://github.com/tsapeta))
+
 ## 12.0.1 — 2022-11-02
 
 _This version does not introduce any user-facing changes._

package/README.md

@@ -4,7 +4,7 @@ A component that renders a native blur view on iOS and falls back to a semi-tran
 
 # API documentation
 
-- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/blur-view.md)
+- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/blur-view.mdx)
 - [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/blur-view/)
 
 # Installation in managed Expo projects

package/build/BlurView.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
+/**
+ * A React component that blurs everything underneath the view.
+ */
 declare const BlurViewWithForwardedRef: React.ForwardRefExoticComponent<{
     tint?: import("./BlurView.types").BlurTint | undefined;
     intensity?: number | undefined;

package/build/BlurView.d.ts.map

@@ -1 +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"}
+{"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;AAgFhE;;GAEG;AACH,QAAA,MAAM,wBAAwB;;;iEAI7B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/build/BlurView.js

@@ -1,4 +1,4 @@
-import { NativeModulesProxy, requireNativeViewManager } from 'expo-modules-core';
+import { requireNativeModule, requireNativeViewManager } from 'expo-modules-core';
 import React from 'react';
 import { View, StyleSheet, findNodeHandle } from 'react-native';
 class BlurView extends React.Component {
@@ -22,11 +22,12 @@ class BlurView extends React.Component {
         const originalSetNativeProps = view.setNativeProps.bind(view);
         // Override `setNativeProps` (https://reactnative.dev/docs/animations#setnativeprops)
         view.setNativeProps = ({ tint, intensity, ...nativeProps }) => {
+            const ExpoBlurView = requireNativeModule('ExpoBlurView');
             // Call the original method with all View-based props
             view && originalSetNativeProps(nativeProps);
-            // Invoke `setNativeProps` native expo method defined by `ExpoBlurViewManager`
+            // Invoke `setNativeProps` native expo method defined by `ExpoBlurView` module
             this.blurViewRef.current &&
-                NativeModulesProxy.ExpoBlurViewManager.setNativeProps({ tint, intensity }, findNodeHandle(this.blurViewRef.current));
+                ExpoBlurView.setNativeProps({ tint, intensity }, findNodeHandle(this.blurViewRef.current));
         };
         // mimic `forwardedRef` logic
         if (typeof this.props.forwardedRef === 'function') {
@@ -49,6 +50,9 @@ const styles = StyleSheet.create({
 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.
+/**
+ * A React component that blurs everything underneath the view.
+ */
 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,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"]}
+{"version":3,"file":"BlurView.js","sourceRoot":"","sources":["../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAClF,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,MAAM,YAAY,GAAG,mBAAmB,CAAC,cAAc,CAAC,CAAC;YAEzD,qDAAqD;YACrD,IAAI,IAAI,sBAAsB,CAAC,WAAW,CAAC,CAAC;YAC5C,8EAA8E;YAC9E,IAAI,CAAC,WAAW,CAAC,OAAO;gBACtB,YAAY,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/F,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;;GAEG;AACH,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAAC,KAAoB,EAAE,UAAoC,EAAE,EAAE,CAAC,CAC9D,oBAAC,QAAQ,OAAK,KAAK,EAAE,YAAY,EAAE,UAAU,GAAI,CAClD,CACF,CAAC;AAEF,eAAe,wBAAwB,CAAC","sourcesContent":["import { requireNativeModule, 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      const ExpoBlurView = requireNativeModule('ExpoBlurView');\n\n      // Call the original method with all View-based props\n      view && originalSetNativeProps(nativeProps);\n      // Invoke `setNativeProps` native expo method defined by `ExpoBlurView` module\n      this.blurViewRef.current &&\n        ExpoBlurView.setNativeProps({ tint, intensity }, findNodeHandle(this.blurViewRef.current));\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.\n/**\n * A React component that blurs everything underneath the view.\n */\nconst BlurViewWithForwardedRef = React.forwardRef<View, BlurViewProps>(\n  (props: BlurViewProps, forwardRef: React.ForwardedRef<View>) => (\n    <BlurView {...props} forwardedRef={forwardRef} />\n  )\n);\n\nexport default BlurViewWithForwardedRef;\n"]}

package/build/BlurView.types.d.ts

@@ -1,5 +1,5 @@
 import { ViewProps } from 'react-native';
-export declare type BlurViewProps = {
+export type BlurViewProps = {
     /**
      * A tint mode which will be applied to the view.
      * @default 'default'
@@ -15,5 +15,5 @@ export declare type BlurViewProps = {
      */
     intensity?: number;
 } & ViewProps;
-export declare type BlurTint = 'light' | 'dark' | 'default';
+export type BlurTint = 'light' | 'dark' | 'default';
 //# sourceMappingURL=BlurView.types.d.ts.map

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

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

package/build/BlurView.web.js

@@ -20,7 +20,10 @@ function getBlurStyle({ intensity, tint }) {
         backgroundColor: getBackgroundColor(intensity, tint),
     };
     if (isBlurSupported()) {
-        style.backdropFilter = `saturate(180%) blur(${intensity * 0.2}px)`;
+        const blur = `saturate(180%) blur(${intensity * 0.2}px)`;
+        style.backdropFilter = blur;
+        // Safari support
+        style['-webkit-backdrop-filter'] = blur;
     }
     return style;
 }

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,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"]}
+{"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,MAAM,IAAI,GAAG,uBAAuB,SAAS,GAAG,GAAG,KAAK,CAAC;QACzD,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;QAC5B,iBAAiB;QACjB,KAAK,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;KACzC;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    const blur = `saturate(180%) blur(${intensity * 0.2}px)`;\n    style.backdropFilter = blur;\n    // Safari support\n    style['-webkit-backdrop-filter'] = blur;\n  }\n\n  return style;\n}\n"]}

package/expo-module.config.json

@@ -0,0 +1,7 @@
+{
+  "name": "expo-blur",
+  "platforms": ["ios"],
+  "ios": {
+    "modules": ["BlurViewModule"]
+  }
+}

package/ios/{EXBlur/BlurView.swift → BlurView.swift}

@@ -1,15 +1,12 @@
 // Copyright 2015-present 650 Industries. All rights reserved.
 
-import UIKit
-import React
+import ExpoModulesCore
 
-@objc(EXBlurView)
-public class BlurView: RCTView {
-  private var blurEffectView: BlurEffectView
+public final class BlurView: ExpoView {
+  private let blurEffectView = BlurEffectView()
 
-  override init(frame: CGRect) {
-    blurEffectView = BlurEffectView()
-    super.init(frame: frame)
+  public required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
 
     blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
     clipsToBounds = true
@@ -17,14 +14,10 @@ public class BlurView: RCTView {
     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/BlurViewModule.swift

@@ -0,0 +1,32 @@
+// Copyright 2022-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+
+public final class BlurViewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoBlurView")
+
+    View(BlurView.self) {
+      Prop("tint") { (view, tint: String) in
+        view.setTint(tint)
+      }
+
+      Prop("intensity") { (view, intensity: Double) in
+        view.setIntensity(intensity / 100)
+      }
+    }
+
+    AsyncFunction("setNativeProps") { (props: [String: Any], viewTag: Int) in
+      guard let view = appContext?.findView(withTag: viewTag, ofType: BlurView.self) else {
+        throw Exceptions.ViewNotFound((tag: viewTag, type: BlurView.self))
+      }
+      if let tint = props["tint"] as? String {
+        view.setTint(tint)
+      }
+      if let intensity = props["intensity"] as? Double {
+        view.setIntensity(intensity / 100)
+      }
+    }
+    .runOnQueue(.main)
+  }
+}

package/ios/{EXBlur.podspec → ExpoBlur.podspec}

@@ -3,7 +3,7 @@ require 'json'
 package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
 
 Pod::Spec.new do |s|
-  s.name           = 'EXBlur'
+  s.name           = 'ExpoBlur'
   s.version        = package['version']
   s.summary        = package['description']
   s.description    = package['description']
@@ -17,9 +17,9 @@ Pod::Spec.new do |s|
   s.dependency 'ExpoModulesCore'
 
   if !$ExpoUseSources&.include?(package['name']) && ENV['EXPO_USE_SOURCE'].to_i == 0 && File.exist?("#{s.name}.xcframework") && Gem::Version.new(Pod::VERSION) >= Gem::Version.new('1.10.0')
-    s.source_files = "#{s.name}/**/*.h"
+    s.source_files = "**/*.h"
     s.vendored_frameworks = "#{s.name}.xcframework"
   else
-    s.source_files = "#{s.name}/**/*.{h,m,swift}"
+    s.source_files = "**/*.{h,m,swift}"
   end
 end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-blur",
-  "version": "12.0.1",
+  "version": "12.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",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "expo": "*"
   },
-  "gitHead": "1a87dcc55895a9e16e3d4fd0fa78f2244c1d961f"
+  "gitHead": "1815e2eaad8c753588c7b1eb74420174a28e01f4"
 }

package/src/BlurView.tsx

@@ -1,4 +1,4 @@
-import { NativeModulesProxy, requireNativeViewManager } from 'expo-modules-core';
+import { requireNativeModule, requireNativeViewManager } from 'expo-modules-core';
 import React from 'react';
 import { View, StyleSheet, findNodeHandle } from 'react-native';
 
@@ -32,14 +32,13 @@ class BlurView extends React.Component<BlurViewProps & BlurViewForwardedRefProp>
 
     // Override `setNativeProps` (https://reactnative.dev/docs/animations#setnativeprops)
     view.setNativeProps = ({ tint, intensity, ...nativeProps }: BlurViewProps) => {
+      const ExpoBlurView = requireNativeModule('ExpoBlurView');
+
       // Call the original method with all View-based props
       view && originalSetNativeProps(nativeProps);
-      // Invoke `setNativeProps` native expo method defined by `ExpoBlurViewManager`
+      // Invoke `setNativeProps` native expo method defined by `ExpoBlurView` module
       this.blurViewRef.current &&
-        NativeModulesProxy.ExpoBlurViewManager.setNativeProps(
-          { tint, intensity },
-          findNodeHandle(this.blurViewRef.current)
-        );
+        ExpoBlurView.setNativeProps({ tint, intensity }, findNodeHandle(this.blurViewRef.current));
     };
 
     // mimic `forwardedRef` logic
@@ -81,8 +80,13 @@ 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<View, BlurViewProps>((props, forwardRef) => (
-  <BlurView {...props} forwardedRef={forwardRef} />
-));
+/**
+ * A React component that blurs everything underneath the view.
+ */
+const BlurViewWithForwardedRef = React.forwardRef<View, BlurViewProps>(
+  (props: BlurViewProps, forwardRef: React.ForwardedRef<View>) => (
+    <BlurView {...props} forwardedRef={forwardRef} />
+  )
+);
 
 export default BlurViewWithForwardedRef;

package/src/BlurView.web.tsx

@@ -28,7 +28,10 @@ function getBlurStyle({ intensity, tint }): Record<string, string> {
   };
 
   if (isBlurSupported()) {
-    style.backdropFilter = `saturate(180%) blur(${intensity * 0.2}px)`;
+    const blur = `saturate(180%) blur(${intensity * 0.2}px)`;
+    style.backdropFilter = blur;
+    // Safari support
+    style['-webkit-backdrop-filter'] = blur;
   }
 
   return style;

package/ios/EXBlur/EXBlurViewManager.h

@@ -1,8 +0,0 @@
-// Copyright 2016-present 650 Industries. All rights reserved.
-
-#import <ExpoModulesCore/EXViewManager.h>
-#import <ExpoModulesCore/EXModuleRegistryConsumer.h>
-
-@interface EXBlurViewManager : EXViewManager <EXModuleRegistryConsumer>
-
-@end

package/ios/EXBlur/EXBlurViewManager.m

@@ -1,63 +0,0 @@
-// Copyright 2016-present 650 Industries. All rights reserved.
-
-#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;
-
-@end
-
-@implementation EXBlurViewManager
-
-EX_EXPORT_MODULE(ExpoBlurViewManager);
-
-- (void)setModuleRegistry:(EXModuleRegistry *)moduleRegistry {
-  _moduleRegistry = moduleRegistry;
-}
-
-- (UIView *)view
-{
-  return [EXBlurView new];
-}
-
-- (NSString *)viewName
-{
-  return @"ExpoBlurView";
-}
-
-EX_VIEW_PROPERTY(tint, NSString *, EXBlurView)
-{
-  [view setTint:value];
-}
-
-EX_VIEW_PROPERTY(intensity, NSNumber *, EXBlurView)
-{
-  [view setIntensity:[value doubleValue] / 100];
-}
-
-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;
-      if (nativeProps[@"intensity"]) { [blurView setIntensity:[nativeProps[@"intensity"] floatValue] / 100]; }
-      if (nativeProps[@"tint"]) { [blurView setTint:nativeProps[@"tint"]]; }
-    } else {
-      reject(@"E_INVALID_VIEW", [NSString stringWithFormat:@"Invalid view returned from registry, expected EXBlurView, got: %@", view], nil);
-    }
-  } forView:viewTag ofClass:[EXBlurView class]];
-}
-
-@end

package/unimodule.json

@@ -1,4 +0,0 @@
-{
-  "name": "expo-blur",
-  "platforms": ["ios"]
-}