expo-blur 12.1.0 → 12.2.0

package/CHANGELOG.md

@@ -10,6 +10,12 @@
 
 ### 💡 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

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;AAgFhE,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

@@ -50,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,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,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 { 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.\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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-blur",
-  "version": "12.1.0",
+  "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": "ba80e8181b79d06e00a245653727f4eaeb80420e"
+  "gitHead": "1815e2eaad8c753588c7b1eb74420174a28e01f4"
 }

package/src/BlurView.tsx

@@ -80,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;