expo-blur 12.2.1 → 12.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/build/BlurView.web.js +1 -1
- package/build/BlurView.web.js.map +1 -1
- package/package.json +2 -2
- package/src/BlurView.web.tsx +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,12 @@
|
|
|
10
10
|
|
|
11
11
|
### 💡 Others
|
|
12
12
|
|
|
13
|
+
## 12.2.2 — 2023-02-14
|
|
14
|
+
|
|
15
|
+
### 🐛 Bug fixes
|
|
16
|
+
|
|
17
|
+
- Add `WebkitBackdropFilter` to support `react-native-web` styling. ([#21146](https://github.com/expo/expo/pull/21146) by [@EvanBacon](https://github.com/EvanBacon))
|
|
18
|
+
|
|
13
19
|
## 12.2.1 — 2023-02-09
|
|
14
20
|
|
|
15
21
|
_This version does not introduce any user-facing changes._
|
package/build/BlurView.web.js
CHANGED
|
@@ -23,7 +23,7 @@ function getBlurStyle({ intensity, tint }) {
|
|
|
23
23
|
const blur = `saturate(180%) blur(${intensity * 0.2}px)`;
|
|
24
24
|
style.backdropFilter = blur;
|
|
25
25
|
// Safari support
|
|
26
|
-
style
|
|
26
|
+
style.WebkitBackdropFilter = blur;
|
|
27
27
|
}
|
|
28
28
|
return style;
|
|
29
29
|
}
|
|
@@ -1 +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,
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "expo-blur",
|
|
3
|
-
"version": "12.2.
|
|
3
|
+
"version": "12.2.2",
|
|
4
4
|
"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.",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"expo": "*"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "c8107d57eabaedff5d53bc8036d062db12a473c8"
|
|
47
47
|
}
|
package/src/BlurView.web.tsx
CHANGED
|
@@ -31,7 +31,7 @@ function getBlurStyle({ intensity, tint }): Record<string, string> {
|
|
|
31
31
|
const blur = `saturate(180%) blur(${intensity * 0.2}px)`;
|
|
32
32
|
style.backdropFilter = blur;
|
|
33
33
|
// Safari support
|
|
34
|
-
style
|
|
34
|
+
style.WebkitBackdropFilter = blur;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
return style;
|