@react-native-community/blur - npm Package Compare versions

Comparing version 3.4.1 to 3.5.0

index.d.ts

@@ -9,2 +9,18 @@ import * as React from "react";
     | "dark"
+    // iOS 13+ only
+    | "chromeMaterial"
+    | "material"
+    | "thickMaterial"
+    | "thinMaterial"
+    | "ultraThinMaterial"
+    | "chromeMaterialDark"
+    | "materialDark"
+    | "thickMaterialDark"
+    | "thinMaterialDark"
+    | "ultraThinMaterialDark"
+    | "chromeMaterialLight"
+    | "materialLight"
+    | "thickMaterialLight"
+    | "thinMaterialLight"
+    | "ultraThinMaterialLight"
     // tvOS and iOS 10+ only
@@ -17,3 +33,2 @@ | "regular"
   style?: StyleProp<ViewStyle>
-  viewRef?: number | null
   blurRadius?: number
@@ -20,0 +35,0 @@ downsampleFactor?: number

package.json

 {
   "name": "@react-native-community/blur",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "React Native Blur component",
@@ -29,10 +29,10 @@ "main": "index.js",
   "devDependencies": {
-    "@react-native-community/eslint-config": "^0.0.5",
-    "eslint": "^6.6.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "husky": "^3.0.9",
-    "lint-staged": "^9.4.2",
-    "prettier": "1.18.2",
-    "react": "16.11.0",
-    "react-native": "0.61.4"
+    "@react-native-community/eslint-config": "^1.0.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "husky": "^4.2.3",
+    "lint-staged": "^10.1.2",
+    "prettier": "2.0.4",
+    "react": "16.13.1",
+    "react-native": "0.62.1"
   },
@@ -39,0 +39,0 @@ "husky": {

README.md

@@ -5,3 +5,3 @@ # `@react-native-community/blur`
 
-A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [500px-android-blur](https://github.com/500px/500px-android-blur) on Android.<br>
+A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [BlurView](https://github.com/Dimezis/BlurView) on Android.<br>
 
@@ -45,19 +45,3 @@ <img src='https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif' />
 
-4. (Android only) Add the following to `android/app/build.gradle`
-
-```
-android {
-    // make sure to use 23.0.3 or greater
-    buildToolsVersion '23.0.3'
-
-    // ...
-    defaultConfig {
-        // Add these lines below the existing config
-        renderscriptTargetApi 23
-        renderscriptSupportModeEnabled true
-    }
-}
-```
-
-5. (Android only, optional) 
+4. (Android only, optional)
 If you've defined _[project-wide properties](https://developer.android.com/studio/build/gradle-tips.html)_ (**recommended**) in your root `build.gradle`, this library will detect the presence of the following properties:
@@ -79,3 +63,3 @@
 
-6. Include the library in your code:
+5. Include the library in your code:
 
@@ -86,3 +70,3 @@ ```javascript
 
-7. Compile and have fun!
+6. Compile and have fun!
 
@@ -100,2 +84,18 @@ ### BlurView
   - `prominent` - prominent blur type (iOS 10+ and tvOS only)
+  - iOS 13 only Blur types:
+    - `chromeMaterial` - An adaptable blur effect that creates the appearance of the system chrome.
+    - `material` - An adaptable blur effect that creates the appearance of a material with normal thickness.
+    - `thickMaterial` - An adaptable blur effect that creates the appearance of a material that is thicker than normal.
+    - `thinMaterial` - An adaptable blur effect that creates the appearance of an ultra-thin material.
+    - `ultraThinMaterial` - An adaptable blur effect that creates the appearance of an ultra-thin material.
+    - `chromeMaterialDark` - A blur effect that creates the appearance of an ultra-thin material and is always dark.
+    - `materialDark` - A blur effect that creates the appearance of a thin material and is always dark.
+    - `thickMaterialDark` - A blur effect that creates the appearance of a material with normal thickness and is always dark.
+    - `thinMaterialDark` - A blur effect that creates the appearance of a material that is thicker than normal and is always dark.
+    - `ultraThinMaterialDark` - A blur effect that creates the appearance of the system chrome and is always dark.
+    - `chromeMaterialLight` - An adaptable blur effect that creates the appearance of the system chrome.
+    - `materialLight` - An adaptable blur effect that creates the appearance of a material with normal thickness.
+    - `thickMaterialLight` - An adaptable blur effect that creates the appearance of a material that is thicker than normal.
+    - `thinMaterialLight` - An adaptable blur effect that creates the appearance of a thin material.
+    - `ultraThinMaterialLight` - An adaptable blur effect that creates the appearance of an ultra-thin material.
 - `blurAmount` (Default: 10, Number)
@@ -110,19 +110,17 @@ - `0-100` - Adjusts blur intensity
 import React, { Component } from "react";
-import { View, Image, Text, findNodeHandle, StyleSheet } from "react-native";
+import { View, Image, Text, StyleSheet } from "react-native";
 import { BlurView } from "@react-native-community/blur";
 
 export default class Menu extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { viewRef: null };
-  }
 
-  imageLoaded() {
-    this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
-  }
-
   render() {
     return (
       <View style={styles.container}>
-        <Text>Hi, I am some unblurred text</Text>
+        <Image
+          key={'blurryImage'}
+          source={{ uri }}
+          style={styles.absolute}
+        />
+        <Text style={styles.absolute}>Hi, I am some blurred text</Text>
+{/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
         <BlurView
@@ -134,10 +132,3 @@ style={styles.absolute}
         />
-        <Image
-          ref={img => {
-            this.backgroundImage = img;
-          }}
-          source={{ uri }}
-          style={styles.absolute}
-          onLoadEnd={this.imageLoaded.bind(this)}
-        />
+        <Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
       </View>
@@ -165,4 +156,2 @@ );
 
-Note that `viewRef` is only required if you need to support Android. See the [Android section](#android) for more details.
-
 ### VibrancyView
@@ -194,9 +183,4 @@
 
-Android uses the [500px-android-blur](https://github.com/500px/500px-android-blur) library, which works by blurring a referenced view. This means that you must wait until the view you want to blur is rendered. You then use `findNodeHandle` to get a reference to that view, and pass that reference to the `BlurView` as the `viewRef` prop. Take a look at [the BlurView example](#blurview) to see how it works.
+Android uses the [BlurView](https://github.com/Dimezis/BlurView).
 
-The Android library introduces some limitations:
-
-- `BlurView` cannot be a child of the view that is being blurred (this would cause an infinite loop)
-- `BlurView` cannot contain any child components.
-
 If you only need to support iOS, then you can safely ignore these limitations.
@@ -203,0 +187,0 @@

src/BlurView.android.js

@@ -8,3 +8,2 @@ import React, { Component } from 'react';
   ViewPropTypes,
-  Platform,
   StyleSheet,
@@ -68,20 +67,14 @@ } from 'react-native';
   render() {
-    if (this.props.children != null) {
-      throw new Error(
-        '[ReactNativeBlur]: BlurView cannot contain any child views on Android. ' +
-        'You should use "position: absolute" on the BlurView, ' +
-        'and place other views in front of it.'
-      );
-    }
+    const { style } = this.props;
 
-    const { viewRef, style } = this.props;
-
     return (
       <NativeBlurView
-        viewRef={viewRef}
         blurRadius={this.blurRadius()}
         downsampleFactor={this.downsampleFactor()}
         overlayColor={this.overlayColor()}
+        pointerEvents="none"
         style={StyleSheet.compose(styles.transparent, style)}
-      />
+      >
+        {this.props.children}
+      </NativeBlurView>
     );
@@ -103,6 +96,2 @@ }
   overlayColor: PropTypes.string,
-  viewRef: Platform.select({
-    android: PropTypes.number.isRequired,
-    default: PropTypes.number,
-  }),
 };
@@ -109,0 +98,0 @@

src/BlurView.ios.js

@@ -36,2 +36,17 @@ import React, { Component } from 'react';
     'extraDark',
+    'chromeMaterial',
+    'material',
+    'thickMaterial',
+    'thinMaterial',
+    'ultraThinMaterial',
+    'chromeMaterialDark',
+    'materialDark',
+    'thickMaterialDark',
+    'thinMaterialDark',
+    'ultraThinMaterialDark',
+    'chromeMaterialLight',
+    'materialLight',
+    'thickMaterialLight',
+    'thinMaterialLight',
+    'ultraThinMaterialLight',
   ]),
@@ -38,0 +53,0 @@ blurAmount: PropTypes.number,

Fixed alerts

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

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

47855

-9.12%

Number of package files

33

-5.71%

Lines of code

301

-33.7%

Number of lines in readme file

278

-5.44%

No dependency changes