From 4acfdaabc9e558d2ea4f30ece82203495863a410 Mon Sep 17 00:00:00 2001 From: Evan Bacon Date: Sun, 17 Mar 2024 22:45:11 -0500 Subject: [PATCH] fix(blur): Migrate web to a function component and fix reanimated errors (#27721) # Why - [`setNativeProps` was removed](https://github.com/necolas/react-native-web/commit/e68c32770757194af103cca0095c0c204995505b) so we need to set the style props directly. This can be reproduced by opening NCL and going to the blur route. - Tested the change in both safari and chrome. - This PR also drops support for older browsers in favor of the unsupported style warning. --------- Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com> --- packages/expo-blur/CHANGELOG.md | 2 + packages/expo-blur/build/BlurView.web.d.ts | 20 ++-- .../expo-blur/build/BlurView.web.d.ts.map | 2 +- packages/expo-blur/build/BlurView.web.js | 79 +++++++-------- packages/expo-blur/build/BlurView.web.js.map | 2 +- packages/expo-blur/src/BlurView.web.tsx | 99 +++++++++---------- .../src/__tests__/BlurView-test.web.tsx | 11 --- 7 files changed, 96 insertions(+), 119 deletions(-) diff --git a/packages/expo-blur/CHANGELOG.md b/packages/expo-blur/CHANGELOG.md index 635c1dbaaa246..0ff09a871d786 100644 --- a/packages/expo-blur/CHANGELOG.md +++ b/packages/expo-blur/CHANGELOG.md @@ -10,6 +10,8 @@ ### 🐛 Bug fixes +- Migrate web to a function component and fix reanimated errors related to [`setNativeProps` being removed](https://github.com/necolas/react-native-web/commit/e68c32770757194af103cca0095c0c204995505b). ([#27721](https://github.com/expo/expo/pull/27721) by [@EvanBacon](https://github.com/EvanBacon)) + ### 💡 Others ## 12.9.2 - 2024-02-16 diff --git a/packages/expo-blur/build/BlurView.web.d.ts b/packages/expo-blur/build/BlurView.web.d.ts index 4c6382910e9ec..b77dac030abce 100644 --- a/packages/expo-blur/build/BlurView.web.d.ts +++ b/packages/expo-blur/build/BlurView.web.d.ts @@ -1,13 +1,11 @@ -import * as React from 'react'; import { BlurViewProps } from './BlurView.types'; -export default class BlurView extends React.Component { - private blurViewRef; - /** - * Reanimated will detect and call this function with animated styles passed as props on every - * animation frame. We want to extract intensity from the props, then create and apply new styles, - * which create the blur based on the intensity and current tint. - */ - setNativeProps(nativeProps: any): void; - render(): JSX.Element; -} +declare const BlurView: import("react").ForwardRefExoticComponent<{ + tint?: import("./BlurView.types").BlurTint | undefined; + intensity?: number | undefined; + blurReductionFactor?: number | undefined; + experimentalBlurMethod?: import("./BlurView.types").ExperimentalBlurMethod | undefined; +} & import("react-native").ViewProps & import("react").RefAttributes<{ + setNativeProps: (props: BlurViewProps) => void; +}>>; +export default BlurView; //# sourceMappingURL=BlurView.web.d.ts.map \ No newline at end of file diff --git a/packages/expo-blur/build/BlurView.web.d.ts.map b/packages/expo-blur/build/BlurView.web.d.ts.map index 32c4dd2f62211..5b42fa59eefe0 100644 --- a/packages/expo-blur/build/BlurView.web.d.ts.map +++ b/packages/expo-blur/build/BlurView.web.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"BlurView.web.d.ts","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAClE,OAAO,CAAC,WAAW,CAA2B;IAE9C;;;;OAIG;IACH,cAAc,CAAC,WAAW,KAAA;IAU1B,MAAM;CAKP"} \ No newline at end of file +{"version":3,"file":"BlurView.web.d.ts","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ;;;;;;4BAAwC,aAAa,KAAK,IAAI;GAyC3E,CAAC;AAcF,eAAe,QAAQ,CAAC"} \ No newline at end of file diff --git a/packages/expo-blur/build/BlurView.web.js b/packages/expo-blur/build/BlurView.web.js index b626833318911..593555576a925 100644 --- a/packages/expo-blur/build/BlurView.web.js +++ b/packages/expo-blur/build/BlurView.web.js @@ -1,53 +1,42 @@ // Copyright © 2024 650 Industries. 'use client'; -import * as React from 'react'; +import { forwardRef, useImperativeHandle, useRef } from 'react'; import { View } from 'react-native'; import getBackgroundColor from './getBackgroundColor'; -// TODO: Class components are not supported with React Server Components. -export default class BlurView extends React.Component { - blurViewRef = React.createRef(); - /** - * Reanimated will detect and call this function with animated styles passed as props on every - * animation frame. We want to extract intensity from the props, then create and apply new styles, - * which create the blur based on the intensity and current tint. - */ - setNativeProps(nativeProps) { - const { style, tint, intensity: standardIntensity } = this.props; - const intensity = nativeProps.style.intensity ?? standardIntensity; - const blurStyle = getBlurStyle({ intensity, tint }); - this.blurViewRef?.current?.setNativeProps({ - ...nativeProps, - style: [style, blurStyle, nativeProps.style], - }); - } - render() { - const { tint = 'default', intensity = 50, style, ...props } = this.props; - const blurStyle = getBlurStyle({ tint, intensity }); - return ; - } -} -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' && - (CSS.supports('-webkit-backdrop-filter', 'blur(1px)') || - CSS.supports('backdrop-filter', 'blur(1px)'))); -} -function getBlurStyle({ intensity, tint }) { - const style = { +const BlurView = forwardRef(({ tint = 'default', intensity = 50, style, ...props }, ref) => { + const blurViewRef = useRef(null); + const blurStyle = getBlurStyle({ tint, intensity }); + useImperativeHandle(ref, () => ({ + setNativeProps: (nativeProps) => { + if (!blurViewRef.current?.style) { + return; + } + // @ts-expect-error: `style.intensity` is not defined in the types + const nextIntensity = nativeProps.style?.intensity ?? intensity; + const blurStyle = getBlurStyle({ intensity: nextIntensity, tint: tint ?? 'default' }); + if (nativeProps.style) { + for (const key in nativeProps.style) { + if (key !== 'intensity') { + blurViewRef.current.style[key] = nativeProps.style[key]; + } + } + } + blurViewRef.current.style.backgroundColor = blurStyle.backgroundColor; + blurViewRef.current.style.backdropFilter = blurStyle.backdropFilter; + blurViewRef.current.style['webkitBackdropFilter'] = blurStyle.WebkitBackdropFilter; + }, + }), [intensity, tint]); + return (); +}); +function getBlurStyle({ intensity, tint, }) { + const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`; + return { backgroundColor: getBackgroundColor(Math.min(intensity, 100), tint), + backdropFilter: blur, + WebkitBackdropFilter: blur, }; - if (isBlurSupported()) { - const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`; - style.backdropFilter = blur; - // Safari support - style.WebkitBackdropFilter = blur; - } - return style; } +export default BlurView; //# sourceMappingURL=BlurView.web.js.map \ No newline at end of file diff --git a/packages/expo-blur/build/BlurView.web.js.map b/packages/expo-blur/build/BlurView.web.js.map index fb669aef31486..8ebe3c39b2d0b 100644 --- a/packages/expo-blur/build/BlurView.web.js.map +++ b/packages/expo-blur/build/BlurView.web.js.map @@ -1 +1 @@ -{"version":3,"file":"BlurView.web.js","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,YAAY,CAAC;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,yEAAyE;AACzE,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAwB;IAC1D,WAAW,GAAG,KAAK,CAAC,SAAS,EAAQ,CAAC;IAE9C;;;;OAIG;IACH,cAAc,CAAC,WAAW;QACxB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjE,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,IAAI,iBAAiB,CAAC;QACnE,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QACpD,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,cAAc,CAAC;YACxC,GAAG,WAAW;YACd,KAAK,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC;SAC7C,CAAC,CAAC;IACL,CAAC;IAED,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,CAAC,CAAC;QACpD,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,CAAC;IAC/E,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,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC;KACpE,CAAC;IAEF,IAAI,eAAe,EAAE,EAAE;QACrB,MAAM,IAAI,GAAG,uBAAuB,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC;QACxE,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;QAC5B,iBAAiB;QACjB,KAAK,CAAC,oBAAoB,GAAG,IAAI,CAAC;KACnC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright © 2024 650 Industries.\n\n'use client';\n\nimport * as React from 'react';\nimport { View } from 'react-native';\n\nimport { BlurViewProps } from './BlurView.types';\nimport getBackgroundColor from './getBackgroundColor';\n\n// TODO: Class components are not supported with React Server Components.\nexport default class BlurView extends React.Component {\n private blurViewRef = React.createRef();\n\n /**\n * Reanimated will detect and call this function with animated styles passed as props on every\n * animation frame. We want to extract intensity from the props, then create and apply new styles,\n * which create the blur based on the intensity and current tint.\n */\n setNativeProps(nativeProps) {\n const { style, tint, intensity: standardIntensity } = this.props;\n const intensity = nativeProps.style.intensity ?? standardIntensity;\n const blurStyle = getBlurStyle({ intensity, tint });\n this.blurViewRef?.current?.setNativeProps({\n ...nativeProps,\n style: [style, blurStyle, nativeProps.style],\n });\n }\n\n render() {\n const { tint = 'default', intensity = 50, style, ...props } = this.props;\n const blurStyle = getBlurStyle({ tint, intensity });\n return ;\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 {\n const style: Record = {\n backgroundColor: getBackgroundColor(Math.min(intensity, 100), tint),\n };\n\n if (isBlurSupported()) {\n const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`;\n style.backdropFilter = blur;\n // Safari support\n style.WebkitBackdropFilter = blur;\n }\n\n return style;\n}\n"]} \ No newline at end of file +{"version":3,"file":"BlurView.web.js","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,YAAY,CAAC;AACb,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7D,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAEpD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,CAAC,WAA0B,EAAE,EAAE;YAC7C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE;gBAC/B,OAAO;aACR;YAED,kEAAkE;YAClE,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,EAAE,SAAS,IAAI,SAAS,CAAC;YAChE,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC;YACtF,IAAI,WAAW,CAAC,KAAK,EAAE;gBACrB,KAAK,MAAM,GAAG,IAAI,WAAW,CAAC,KAAK,EAAE;oBACnC,IAAI,GAAG,KAAK,WAAW,EAAE;wBACvB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;qBACzD;iBACF;aACF;YAED,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC,eAAe,CAAC;YACtE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC;YACpE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,sBAAsB,CAAC,GAAG,SAAS,CAAC,oBAAoB,CAAC;QACrF,CAAC;KACF,CAAC,EACF,CAAC,SAAS,EAAE,IAAI,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAC1B,sFAAsF;IACtF,GAAG,CAAC,CAAC,WAAW,CAAC,EACjB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAI,GACgD;IACpD,MAAM,IAAI,GAAG,uBAAuB,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC;IACxE,OAAO;QACL,eAAe,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC;QACnE,cAAc,EAAE,IAAI;QACpB,oBAAoB,EAAE,IAAI;KAC3B,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["// Copyright © 2024 650 Industries.\n'use client';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { View } from 'react-native';\n\nimport { BlurViewProps } from './BlurView.types';\nimport getBackgroundColor from './getBackgroundColor';\n\nconst BlurView = forwardRef<{ setNativeProps: (props: BlurViewProps) => void }, BlurViewProps>(\n ({ tint = 'default', intensity = 50, style, ...props }, ref) => {\n const blurViewRef = useRef(null);\n const blurStyle = getBlurStyle({ tint, intensity });\n\n useImperativeHandle(\n ref,\n () => ({\n setNativeProps: (nativeProps: BlurViewProps) => {\n if (!blurViewRef.current?.style) {\n return;\n }\n\n // @ts-expect-error: `style.intensity` is not defined in the types\n const nextIntensity = nativeProps.style?.intensity ?? intensity;\n const blurStyle = getBlurStyle({ intensity: nextIntensity, tint: tint ?? 'default' });\n if (nativeProps.style) {\n for (const key in nativeProps.style) {\n if (key !== 'intensity') {\n blurViewRef.current.style[key] = nativeProps.style[key];\n }\n }\n }\n\n blurViewRef.current.style.backgroundColor = blurStyle.backgroundColor;\n blurViewRef.current.style.backdropFilter = blurStyle.backdropFilter;\n blurViewRef.current.style['webkitBackdropFilter'] = blurStyle.WebkitBackdropFilter;\n },\n }),\n [intensity, tint]\n );\n\n return (\n \n );\n }\n);\n\nfunction getBlurStyle({\n intensity,\n tint,\n}: Required>): Record {\n const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`;\n return {\n backgroundColor: getBackgroundColor(Math.min(intensity, 100), tint),\n backdropFilter: blur,\n WebkitBackdropFilter: blur,\n };\n}\n\nexport default BlurView;\n"]} \ No newline at end of file diff --git a/packages/expo-blur/src/BlurView.web.tsx b/packages/expo-blur/src/BlurView.web.tsx index 1f984a92fc7b5..aced573673d7e 100644 --- a/packages/expo-blur/src/BlurView.web.tsx +++ b/packages/expo-blur/src/BlurView.web.tsx @@ -1,65 +1,64 @@ // Copyright © 2024 650 Industries. - 'use client'; - -import * as React from 'react'; +import { forwardRef, useImperativeHandle, useRef } from 'react'; import { View } from 'react-native'; import { BlurViewProps } from './BlurView.types'; import getBackgroundColor from './getBackgroundColor'; -// TODO: Class components are not supported with React Server Components. -export default class BlurView extends React.Component { - private blurViewRef = React.createRef(); +const BlurView = forwardRef<{ setNativeProps: (props: BlurViewProps) => void }, BlurViewProps>( + ({ tint = 'default', intensity = 50, style, ...props }, ref) => { + const blurViewRef = useRef(null); + const blurStyle = getBlurStyle({ tint, intensity }); - /** - * Reanimated will detect and call this function with animated styles passed as props on every - * animation frame. We want to extract intensity from the props, then create and apply new styles, - * which create the blur based on the intensity and current tint. - */ - setNativeProps(nativeProps) { - const { style, tint, intensity: standardIntensity } = this.props; - const intensity = nativeProps.style.intensity ?? standardIntensity; - const blurStyle = getBlurStyle({ intensity, tint }); - this.blurViewRef?.current?.setNativeProps({ - ...nativeProps, - style: [style, blurStyle, nativeProps.style], - }); - } + useImperativeHandle( + ref, + () => ({ + setNativeProps: (nativeProps: BlurViewProps) => { + if (!blurViewRef.current?.style) { + return; + } - render() { - const { tint = 'default', intensity = 50, style, ...props } = this.props; - const blurStyle = getBlurStyle({ tint, intensity }); - return ; - } -} + // @ts-expect-error: `style.intensity` is not defined in the types + const nextIntensity = nativeProps.style?.intensity ?? intensity; + const blurStyle = getBlurStyle({ intensity: nextIntensity, tint: tint ?? 'default' }); + if (nativeProps.style) { + for (const key in nativeProps.style) { + if (key !== 'intensity') { + blurViewRef.current.style[key] = nativeProps.style[key]; + } + } + } -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; + blurViewRef.current.style.backgroundColor = blurStyle.backgroundColor; + blurViewRef.current.style.backdropFilter = blurStyle.backdropFilter; + blurViewRef.current.style['webkitBackdropFilter'] = blurStyle.WebkitBackdropFilter; + }, + }), + [intensity, tint] + ); + + return ( + + ); } - // 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' && - (CSS.supports('-webkit-backdrop-filter', 'blur(1px)') || - CSS.supports('backdrop-filter', 'blur(1px)')) - ); -} +); -function getBlurStyle({ intensity, tint }): Record { - const style: Record = { +function getBlurStyle({ + intensity, + tint, +}: Required>): Record { + const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`; + return { backgroundColor: getBackgroundColor(Math.min(intensity, 100), tint), + backdropFilter: blur, + WebkitBackdropFilter: blur, }; - - if (isBlurSupported()) { - const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`; - style.backdropFilter = blur; - // Safari support - style.WebkitBackdropFilter = blur; - } - - return style; } + +export default BlurView; diff --git a/packages/expo-blur/src/__tests__/BlurView-test.web.tsx b/packages/expo-blur/src/__tests__/BlurView-test.web.tsx index 01ba887145c32..b0dbd6812400c 100644 --- a/packages/expo-blur/src/__tests__/BlurView-test.web.tsx +++ b/packages/expo-blur/src/__tests__/BlurView-test.web.tsx @@ -32,17 +32,6 @@ it(`prefers filters to background color`, () => { expect(view.style['backdropFilter']).toBeDefined(); }); -it(`uses a transparent background color when filters aren't supported`, () => { - // @ts-ignore - global.CSS = undefined; - - const withoutNativeBlur = render(); - const view = getByTestId(withoutNativeBlur.container, 'blur'); - - expect(view.style['backdropFilter']).toBeUndefined(); - expect(view.style['backgroundColor']).toBeDefined(); -}); - it(`supports Animated API`, () => { // react-native-web 0.11 doesn't support createAnimatedComponent with functional components. // This test ensures that the current version of RNW in Expo works with expo-blur.