expo-blur 12.3.1 → 12.4.0

package/CHANGELOG.md

@@ -10,6 +10,19 @@
 
 ### 💡 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
+
+- [iOS] Fixed Detox tests hanging when `BlurView` is present ([#22439](https://github.com/expo/expo/pull/22439) by [@behenate](https://github.com/behenate))
+- Fixed Android build warnings for Gradle version 8. ([#22537](https://github.com/expo/expo/pull/22537), [#22609](https://github.com/expo/expo/pull/22609) by [@kudo](https://github.com/kudo))
+
 ## 12.3.1 — 2023-05-08
 
 _This version does not introduce any user-facing changes._

package/android/build.gradle

@@ -3,7 +3,7 @@ apply plugin: 'kotlin-android'
 apply plugin: 'maven-publish'
 
 group = 'host.exp.exponent'
-version = '12.3.1'
+version = '12.4.0'
 
 buildscript {
   def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
@@ -35,19 +35,11 @@ buildscript {
   }
 }
 
-// Creating sources with comments
-task androidSourcesJar(type: Jar) {
-  classifier = 'sources'
-  from android.sourceSets.main.java.srcDirs
-}
-
 afterEvaluate {
   publishing {
     publications {
       release(MavenPublication) {
         from components.release
-        // Add additional sourcesJar to artifacts
-        artifact(androidSourcesJar)
       }
     }
     repositories {
@@ -70,15 +62,21 @@ android {
     jvmTarget = JavaVersion.VERSION_11.majorVersion
   }
 
+  namespace "expo.modules.blur"
   defaultConfig {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 1
-    versionName "12.3.1"
+    versionName "12.4.0"
   }
   lintOptions {
     abortOnError false
   }
+  publishing {
+    singleVariant("release") {
+      withSourcesJar()
+    }
+  }
 }
 
 dependencies {

package/android/src/main/AndroidManifest.xml

@@ -1,2 +1,2 @@
-<manifest package="expo.modules.blur">
+<manifest>
 </manifest>

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/ios/BlurEffectView.swift

@@ -39,6 +39,15 @@ final class BlurEffectView: UIVisualEffectView {
 
   override func draw(_ rect: CGRect) {
     super.draw(rect)
+
+    // BlurView intensity relies on running an animation and making it partially complete. This means that there
+    // is a continually running animation, which makes detox hang (it waits for the animation to finish indefinitely).
+    // We can detect if detoxServer is running and in that case replace smooth intensity value with an on/off behaviour.
+    if isDetoxPresent() {
+      effect = intensity > 0 ? visualEffect : nil
+      return
+    }
+
     effect = nil
     animator?.stopAnimation(true)
     animator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [unowned self] in
@@ -57,6 +66,12 @@ private func blurEffectStyleFrom(_ tint: String) -> UIBlurEffect.Style {
   }
 }
 
+private func isDetoxPresent() -> Bool {
+  let args = ProcessInfo.processInfo.arguments
+
+  return args.contains("-detoxServer") && args.contains("-detoxSessionId")
+}
+
 /**
  Property wrapper clamping the value between an upper and lower bound
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-blur",
-  "version": "12.3.1",
+  "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": "4ba50c428c8369bb6b3a51a860d4898ad4ccbe78"
+  "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 (