expo-blur 12.3.2 → 12.4.0

package/CHANGELOG.md

@@ -10,6 +10,12 @@
 
 ### 💡 Others
 
+## 12.4.0 — 2023-06-21
+
+### 🛠 Breaking changes
+
+- Enable blurring by default when static rendering. ([#23000](https://github.com/expo/expo/pull/23000) by [@EvanBacon](https://github.com/EvanBacon))
+
 ## 12.3.2 — 2023-06-13
 
 ### 🐛 Bug fixes

package/android/build.gradle

@@ -3,7 +3,7 @@ apply plugin: 'kotlin-android'
 apply plugin: 'maven-publish'
 
 group = 'host.exp.exponent'
-version = '12.3.2'
+version = '12.4.0'
 
 buildscript {
   def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
@@ -67,7 +67,7 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 1
-    versionName "12.3.2"
+    versionName "12.4.0"
   }
   lintOptions {
     abortOnError false

package/build/BlurView.web.js

@@ -9,6 +9,11 @@ export default class BlurView extends React.Component {
     }
 }
 function isBlurSupported() {
+    // TODO: Replace with CSS or static extraction to ensure hydration errors cannot happen.
+    // Enable by default in Node.js
+    if (typeof window === 'undefined') {
+        return true;
+    }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports
     // https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility
     return (typeof CSS !== 'undefined' &&

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,MAAM,IAAI,GAAG,uBAAuB,SAAS,GAAG,GAAG,KAAK,CAAC;QACzD,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;QAC5B,iBAAiB;QACjB,KAAK,CAAC,oBAAoB,GAAG,IAAI,CAAC;KACnC;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.WebkitBackdropFilter = blur;\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,wFAAwF;IACxF,+BAA+B;IAC/B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACjC,OAAO,IAAI,CAAC;KACb;IACD,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,oBAAoB,GAAG,IAAI,CAAC;KACnC;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  // TODO: Replace with CSS or static extraction to ensure hydration errors cannot happen.\n  // Enable by default in Node.js\n  if (typeof window === 'undefined') {\n    return true;\n  }\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.WebkitBackdropFilter = blur;\n  }\n\n  return style;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-blur",
-  "version": "12.3.2",
+  "version": "12.4.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": "3ccd2edee9cbfed217557675cb50f0ba5e55a9e4"
+  "gitHead": "fa5ecca8251986b9f197cc14074eec0ab6dfb6db"
 }

package/src/BlurView.web.tsx

@@ -13,6 +13,11 @@ export default class BlurView extends React.Component<BlurViewProps> {
 }
 
 function isBlurSupported(): boolean {
+  // TODO: Replace with CSS or static extraction to ensure hydration errors cannot happen.
+  // Enable by default in Node.js
+  if (typeof window === 'undefined') {
+    return true;
+  }
   // https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports
   // https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility
   return (