expo-blur - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0-rc.0

build/BlurView.android.d.ts

 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { View } from 'react-native';
-declare type Props = {
-    tint: BlurTint;
-} & React.ComponentProps<typeof View>;
-declare type BlurTint = 'light' | 'dark' | 'default';
+import { BlurTint, Props } from './BlurView.types';
 export default class BlurView extends React.Component<Props> {
     static propTypes: {
+        tint: PropTypes.Validator<BlurTint>;
+        intensity: PropTypes.Validator<number>;
         hitSlop?: PropTypes.Validator<import("react-native").Insets | undefined> | undefined;
@@ -54,6 +52,8 @@ onLayout?: PropTypes.Validator<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
         accessibilityIgnoresInvertColors?: PropTypes.Validator<boolean | undefined> | undefined;
-        tint: PropTypes.Requireable<string>;
     };
+    static defaultProps: {
+        tint: BlurTint;
+        intensity: number;
+    };
     render(): JSX.Element;
 }
-export {};

build/BlurView.android.js

 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { View, ViewPropTypes } from 'react-native';
+import getBackgroundColor from './getBackgroundColor';
 export default class BlurView extends React.Component {
     render() {
-        let { tint, ...props } = this.props;
-        let backgroundColor;
-        if (tint === 'dark') {
-            backgroundColor = 'rgba(0,0,0,0.5)';
-        }
-        else if (tint === 'light') {
-            backgroundColor = 'rgba(255,255,255,0.7)';
-        }
-        else {
-            backgroundColor = 'rgba(255,255,255,0.4)';
-        }
+        let { tint, intensity, ...props } = this.props;
+        let backgroundColor = getBackgroundColor(intensity, tint);
         return <View {...props} style={[this.props.style, { backgroundColor }]}/>;
@@ -21,5 +13,10 @@ }
 BlurView.propTypes = {
-    tint: PropTypes.oneOf(['light', 'default', 'dark']),
     ...ViewPropTypes,
+    tint: PropTypes.oneOf(['light', 'default', 'dark']).isRequired,
+    intensity: PropTypes.number.isRequired,
 };
+BlurView.defaultProps = {
+    tint: 'default',
+    intensity: 100,
+};
 //# sourceMappingURL=BlurView.android.js.map

build/BlurView.ios.d.ts

 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { View } from 'react-native';
-declare type Props = {
-    tint: BlurTint;
-    intensity: number;
-} & React.ComponentProps<typeof View>;
-declare type BlurTint = 'light' | 'dark' | 'default';
-declare type ComponentOrHandle = null | number | React.Component<any, any> | React.ComponentClass<any>;
+import { BlurTint, ComponentOrHandle, Props } from './BlurView.types';
 export default class BlurView extends React.Component<Props> {
     static propTypes: {
-        tint: PropTypes.Validator<"light" | "dark" | "default">;
+        tint: PropTypes.Validator<BlurTint>;
         intensity: PropTypes.Validator<number>;
@@ -60,3 +54,3 @@ hitSlop?: PropTypes.Validator<import("react-native").Insets | undefined> | undefined;
     static defaultProps: {
-        tint: "light" | "dark" | "default";
+        tint: BlurTint;
         intensity: number;
@@ -69,2 +63,1 @@ };
 }
-export {};

build/BlurView.ios.js

@@ -0,5 +1,5 @@
+import { NativeModulesProxy, requireNativeViewManager } from '@unimodules/core';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { ViewPropTypes, findNodeHandle } from 'react-native';
-import { NativeModulesProxy, requireNativeViewManager } from '@unimodules/core';
+import { findNodeHandle, ViewPropTypes } from 'react-native';
 export default class BlurView extends React.Component {
@@ -20,3 +20,3 @@ constructor() {
         let { style, ...props } = this.props;
-        return <NativeBlurView {...props} ref={this._setNativeRef} style={[style, { backgroundColor: 'transparent' }]}/>;
+        return (<NativeBlurView {...props} ref={this._setNativeRef} style={[style, { backgroundColor: 'transparent' }]}/>);
     }
@@ -23,0 +23,0 @@ }

build/BlurView.web.d.ts

 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { View } from 'react-native';
-declare type Props = {
-    tint: BlurTint;
-} & React.ComponentProps<typeof View>;
-declare type BlurTint = 'light' | 'dark' | 'default';
+import { BlurTint, Props } from './BlurView.types';
 export default class BlurView extends React.Component<Props> {
@@ -56,4 +52,7 @@ static propTypes: {
     };
+    static defaultProps: {
+        tint: BlurTint;
+        intensity: number;
+    };
     render(): JSX.Element;
 }
-export {};

build/BlurView.web.js

 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { View, StyleSheet, ViewPropTypes } from 'react-native';
+import { View, ViewPropTypes } from 'react-native';
+import getBackgroundColor from './getBackgroundColor';
 export default class BlurView extends React.Component {
     render() {
-        let { tint, style = {}, ...props } = this.props;
-        let backgroundColor = 'rgba(255,255,255,0.4)';
+        let { tint, intensity, style = {}, ...props } = this.props;
+        const blurStyle = getBlurStyle({ tint, intensity });
+        return <View {...props} style={[style, blurStyle]}/>;
+    }
+}
+BlurView.propTypes = {
+    tint: PropTypes.oneOf(['light', 'default', 'dark']),
+    ...ViewPropTypes,
+};
+BlurView.defaultProps = {
+    tint: 'default',
+    intensity: 50,
+};
+function isBlurSupported() {
+    // https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility
+    // TODO: Bacon: Chrome blur seems broken natively
+    return typeof CSS !== 'undefined' && CSS.supports('-webkit-backdrop-filter', 'blur(1px)');
+    // TODO: Bacon: Chrome doesn't work, RNWeb uses webkit on Safari, which works.
+    // || CSS.supports('backdrop-filter', 'blur(1px)')
+}
+function getBlurStyle({ intensity, tint }) {
+    if (isBlurSupported()) {
+        let backdropFilter = `blur(${intensity * 0.25}px)`;
         if (tint === 'dark') {
-            backgroundColor = 'rgba(0,0,0,0.5)';
+            backdropFilter += ' brightness(50%)';
         }
         else if (tint === 'light') {
-            backgroundColor = 'rgba(255,255,255,0.7)';
+            backdropFilter += ' brightness(150%)';
         }
-        return <View {...props} style={StyleSheet.flatten([style, { backgroundColor }])}/>;
+        return {
+            backdropFilter,
+        };
     }
+    else {
+        let backgroundColor = getBackgroundColor(intensity, tint);
+        return { backgroundColor };
+    }
 }
-BlurView.propTypes = {
-    tint: PropTypes.oneOf(['light', 'default', 'dark']),
-    ...ViewPropTypes,
-};
 //# sourceMappingURL=BlurView.web.js.map

package.json

 {
   "name": "expo-blur",
-  "version": "4.0.0",
+  "version": "5.0.0-rc.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.",
@@ -40,3 +40,3 @@ "main": "build/index.js",
   },
-  "gitHead": "8413e821076a2eca36b302e68dd628ce2e1f591a"
+  "gitHead": "211a7a3ce4007e7aa10ccf6efac4b5333ec31d0a"
 }

README.md

@@ -14,3 +14,3 @@ # expo-blur
 
-For bare React Native projects, you must ensure that you have [installed and configured the `@unimodules/core` package](https://github.com/unimodules/core) before continuing.
+For bare React Native projects, you must ensure that you have [installed and configured the `react-native-unimodules` package](https://github.com/unimodules/react-native-unimodules) before continuing.
 
@@ -25,8 +25,7 @@ ### Add the package to your npm dependencies
 
-Add the dependency to your `Podfile` and then run `pod install`.
+Run `pod install` in the ios directory after installing the npm package.
 
-```ruby
-pod 'EXBlur', path: '../node_modules/expo-blur/ios'
-```
+### Configure for Android
 
+This package only supports iOS. On Android, a plain `View` with a translucent background will be rendered.
 
@@ -33,0 +32,0 @@ # Contributing

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52726

increased by12.41%

Number of package files

35

increased by29.63%

Lines of code

448

increased by20.75%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

33

decreased by-2.94%

No dependency changes