Merge pull request #349 from sebinq/master

Add new iOS blurs featured in iOS 13+

Author: msand

README.md

@@ -77,6 +77,22 @@ import { BlurView, VibrancyView } from "@react-native-community/blur";
   - `extraDark` - extra dark blur type (tvOS only)
   - `regular` - regular blur type (iOS 10+ and tvOS only)
   - `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)
   - `0-100` - Adjusts blur intensity
 

index.d.ts

@@ -6,6 +6,22 @@ export interface BlurViewProperties {
     | "xlight"
     | "light"
     | "dark"
+    // iOS 13+ only
+    | "chromeMaterial"
+    | "material"
+    | "thickMaterial"
+    | "thinMaterial"
+    | "ultraThinMaterial"
+    | "chromeMaterialDark"
+    | "materialDark"
+    | "thickMaterialDark"
+    | "thinMaterialDark"
+    | "ultraThinMaterialDark"
+    | "chromeMaterialLight"
+    | "materialLight"
+    | "thickMaterialLight"
+    | "thinMaterialLight"
+    | "ultraThinMaterialLight"
     // tvOS and iOS 10+ only
     | "regular"
     | "prominent"

index.js.flow

@@ -10,6 +10,22 @@ export type BlurType =
   | 'xlight'
   | 'light'
   | 'dark'
+  // iOS 13+ only
+  | "chromeMaterial"
+  | "material"
+  | "thickMaterial"
+  | "thinMaterial"
+  | "ultraThinMaterial"
+  | "chromeMaterialDark"
+  | "materialDark"
+  | "thickMaterialDark"
+  | "thinMaterialDark"
+  | "ultraThinMaterialDark"
+  | "chromeMaterialLight"
+  | "materialLight"
+  | "thickMaterialLight"
+  | "thinMaterialLight"
+  | "ultraThinMaterialLight"
   // tvOS and iOS 10+ only
   | 'regular'
   | 'prominent'

ios/BlurView.m

@@ -58,7 +58,28 @@ - (UIBlurEffectStyle)blurEffectStyle
     if ([self.blurType isEqual: @"regular"]) return UIBlurEffectStyleRegular;
     if ([self.blurType isEqual: @"prominent"]) return UIBlurEffectStyleProminent;
   #endif
-
+    
+  #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 /* __IPHONE_13_0 */
+    // Adaptable blur styles
+    if ([self.blurType isEqual: @"chromeMaterial"]) return UIBlurEffectStyleSystemChromeMaterial;
+    if ([self.blurType isEqual: @"material"]) return UIBlurEffectStyleSystemMaterial;
+    if ([self.blurType isEqual: @"thickMaterial"]) return UIBlurEffectStyleSystemThickMaterial;
+    if ([self.blurType isEqual: @"thinMaterial"]) return UIBlurEffectStyleSystemThinMaterial;
+    if ([self.blurType isEqual: @"ultraThinMaterial"]) return UIBlurEffectStyleSystemUltraThinMaterial;
+    // dark blur styles
+    if ([self.blurType isEqual: @"chromeMaterialDark"]) return UIBlurEffectStyleSystemChromeMaterialDark;
+    if ([self.blurType isEqual: @"materialDark"]) return UIBlurEffectStyleSystemMaterialDark;
+    if ([self.blurType isEqual: @"thickMaterialDark"]) return UIBlurEffectStyleSystemThickMaterialDark;
+    if ([self.blurType isEqual: @"thinMaterialDark"]) return UIBlurEffectStyleSystemThinMaterialDark;
+    if ([self.blurType isEqual: @"ultraThinMaterialDark"]) return UIBlurEffectStyleSystemUltraThinMaterialDark;
+    // light blur styles
+    if ([self.blurType isEqual: @"chromeMaterialLight"]) return UIBlurEffectStyleSystemChromeMaterialLight;
+    if ([self.blurType isEqual: @"materialLight"]) return UIBlurEffectStyleSystemMaterialLight;
+    if ([self.blurType isEqual: @"thickMaterialLight"]) return UIBlurEffectStyleSystemThickMaterialLight;
+    if ([self.blurType isEqual: @"thinMaterialLight"]) return UIBlurEffectStyleSystemThinMaterialLight;
+    if ([self.blurType isEqual: @"ultraThinMaterialLight"]) return UIBlurEffectStyleSystemUltraThinMaterialLight;
+  #endif
+    
   #if TARGET_OS_TV
     if ([self.blurType isEqual: @"regular"]) return UIBlurEffectStyleRegular;
     if ([self.blurType isEqual: @"prominent"]) return UIBlurEffectStyleProminent;

src/BlurView.ios.js

@@ -33,6 +33,21 @@ BlurView.propTypes = {
     'prominent',
     'regular',
     'extraDark',
+    'chromeMaterial',
+    'material',
+    'thickMaterial',
+    'thinMaterial',
+    'ultraThinMaterial',
+    'chromeMaterialDark',
+    'materialDark',
+    'thickMaterialDark',
+    'thinMaterialDark',
+    'ultraThinMaterialDark',
+    'chromeMaterialLight',
+    'materialLight',
+    'thickMaterialLight',
+    'thinMaterialLight',
+    'ultraThinMaterialLight',
   ]),
   blurAmount: PropTypes.number,
 };