feat: add "style.backgroundBlurRadius" prop to View

The blur only affects siblings (views with the same parent) that are behind
the view with "style.backgroundBlurRadius" defined.

Author: aleclarson

@types/index.d.ts

@@ -1801,6 +1801,7 @@ export interface NativeMouseEvent {
  */
 export interface ViewStyle extends FlexStyle, BorderStyle, ShadowStyleIOS, TransformsStyle {
     backfaceVisibility?: "visible" | "hidden";
+    backgroundBlurRadius?: number;
     backgroundColor?: string;
     opacity?: number;
     testID?: string;

Libraries/Components/View/ViewStylePropTypes.js

@@ -23,6 +23,7 @@ var ViewStylePropTypes = {
   ...ShadowPropTypesIOS,
   ...TransformPropTypes,
   backfaceVisibility: ReactPropTypes.oneOf(['visible', 'hidden']),
+  backgroundBlurRadius: ReactPropTypes.number,
   backgroundColor: ColorPropType,
   borderColor: ColorPropType,
   borderTopColor: ColorPropType,

React/React.xcodeproj/project.pbxproj

@@ -515,6 +515,7 @@
 		657734901EE8354A00A0E9EA /* RCTInspectorPackagerConnection.h in Headers */ = {isa = PBXBuildFile; fileRef = 6577348C1EE8354A00A0E9EA /* RCTInspectorPackagerConnection.h */; };
 		657734911EE8354A00A0E9EA /* RCTInspectorPackagerConnection.m in Sources */ = {isa = PBXBuildFile; fileRef = 6577348D1EE8354A00A0E9EA /* RCTInspectorPackagerConnection.m */; };
 		68EFE4EE1CF6EB3900A1DE13 /* RCTBundleURLProvider.m in Sources */ = {isa = PBXBuildFile; fileRef = 68EFE4ED1CF6EB3900A1DE13 /* RCTBundleURLProvider.m */; };
+		7026D49623C26AC1003328A8 /* RCTBlurFilter.m in Sources */ = {isa = PBXBuildFile; fileRef = 7026D49523C26AC1003328A8 /* RCTBlurFilter.m */; };
 		702B7FF8221C88AF0027174A /* RCTWindow.h in Headers */ = {isa = PBXBuildFile; fileRef = 702B7FF6221C88AF0027174A /* RCTWindow.h */; };
 		702B7FF9221C88AF0027174A /* RCTWindow.m in Sources */ = {isa = PBXBuildFile; fileRef = 702B7FF7221C88AF0027174A /* RCTWindow.m */; };
 		702B7FFC221C88BB0027174A /* RCTMouseEvent.h in Headers */ = {isa = PBXBuildFile; fileRef = 702B7FFA221C88BB0027174A /* RCTMouseEvent.h */; };
@@ -1271,6 +1272,8 @@
 		68EFE4EC1CF6EB3000A1DE13 /* RCTBundleURLProvider.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTBundleURLProvider.h; sourceTree = "<group>"; };
 		68EFE4ED1CF6EB3900A1DE13 /* RCTBundleURLProvider.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTBundleURLProvider.m; sourceTree = "<group>"; };
 		6A15FB0C1BDF663500531DFB /* RCTRootViewInternal.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTRootViewInternal.h; sourceTree = "<group>"; };
+		7026D49523C26AC1003328A8 /* RCTBlurFilter.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RCTBlurFilter.m; sourceTree = "<group>"; };
+		7026D49723C26AD2003328A8 /* RCTBlurFilter.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTBlurFilter.h; sourceTree = "<group>"; };
 		702B7FF6221C88AF0027174A /* RCTWindow.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWindow.h; sourceTree = "<group>"; };
 		702B7FF7221C88AF0027174A /* RCTWindow.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWindow.m; sourceTree = "<group>"; };
 		702B7FFA221C88BB0027174A /* RCTMouseEvent.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTMouseEvent.h; sourceTree = "<group>"; };
@@ -1693,6 +1696,8 @@
 				83F15A171B7CC46900F10295 /* NSView+Private.h */,
 				13E067531A70F44B002CDEE1 /* NSView+React.h */,
 				13E067541A70F44B002CDEE1 /* NSView+React.m */,
+				7026D49523C26AC1003328A8 /* RCTBlurFilter.m */,
+				7026D49723C26AD2003328A8 /* RCTBlurFilter.h */,
 			);
 			path = Views;
 			sourceTree = "<group>";
@@ -2586,6 +2591,7 @@
 			developmentRegion = English;
 			hasScannedForEncodings = 0;
 			knownRegions = (
+				English,
 				en,
 				Base,
 			);
@@ -2768,6 +2774,7 @@
 				83CBBA511A601E3B00E9B192 /* RCTAssert.m in Sources */,
 				59EB6DBD1EBD6FC90072A5E7 /* RCTUIManagerObserverCoordinator.mm in Sources */,
 				13AF20451AE707F9005F5298 /* RCTSlider.m in Sources */,
+				7026D49623C26AC1003328A8 /* RCTBlurFilter.m in Sources */,
 				130443A21E3FEAA900D93A67 /* RCTFollyConvert.mm in Sources */,
 				58114A501AAE93D500E7D092 /* RCTAsyncLocalStorage.m in Sources */,
 				657734851EE834C900A0E9EA /* RCTInspectorDevServerHelper.mm in Sources */,

React/Views/RCTBlurFilter.h

@@ -0,0 +1,10 @@
+#import <CoreImage/CoreImage.h>
+
+@interface RCTBlurFilter : CIFilter
+
+- (instancetype)init NS_DESIGNATED_INITIALIZER;
+
+@property (nonatomic, strong) CIImage *inputImage;
+@property (nonatomic, assign) CGFloat inputRadius;
+
+@end

React/Views/RCTBlurFilter.m

@@ -0,0 +1,27 @@
+#import "RCTBlurFilter.h"
+
+@implementation RCTBlurFilter
+
+- (instancetype)init
+{
+  self = [super init];
+  return self;
+}
+
+- (NSArray<NSString *> *)inputKeys
+{
+  return @[@"inputImage", @"inputRadius"];
+}
+
+- (CIImage *)outputImage
+{
+//  CIContext *context = [CIContext context];
+//  CGImageRef cgImage = [context createCGImage:_inputImage fromRect:_inputImage.extent];
+  CIImage *image = _inputImage; // [CIImage imageWithCGImage:cgImage];
+  image = [image imageByClampingToExtent];
+  image = [image imageByApplyingGaussianBlurWithSigma:_inputRadius];
+  image = [image imageByCroppingToRect:_inputImage.extent];
+  return image;
+}
+
+@end

React/Views/RCTView.h

@@ -122,6 +122,7 @@
 
 @property (nonatomic, assign) CATransform3D transform;
 @property (nonatomic, copy) NSColor *backgroundColor;
+@property (nonatomic, assign) CGFloat backgroundBlurRadius;
 
 @property (nonatomic, copy) RCTDirectEventBlock onDragEnter;
 @property (nonatomic, copy) RCTDirectEventBlock onDragLeave;

React/Views/RCTView.m

@@ -6,8 +6,10 @@
  */
 
 #import "RCTView.h"
+#import <CoreImage/CIFilterBuiltins.h>
 
 #import "RCTAutoInsetsProtocol.h"
+#import "RCTBlurFilter.h"
 #import "RCTBorderDrawing.h"
 #import "RCTConvert.h"
 #import "RCTLog.h"
@@ -101,6 +103,7 @@ - (NSView *)react_findClipView
 @implementation RCTView
 {
   NSColor *_backgroundColor;
+  CIFilter *_backgroundBlur;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -281,7 +284,7 @@ - (NSString *)description
   NSString *superDescription = super.description;
   NSRange semicolonRange = [superDescription rangeOfString:@";"];
   NSString *replacement = [NSString stringWithFormat:@"; reactTag: %@;", self.reactTag];
-  
+
   if ([superDescription length] > 0 && semicolonRange.length > 0) {
     return [superDescription stringByReplacingCharactersInRange:semicolonRange withString:replacement];
   }
@@ -458,6 +461,22 @@ - (void)setBackgroundColor:(NSColor *)backgroundColor
   [self.layer setNeedsDisplay];
 }
 
+- (void)setBackgroundBlurRadius:(CGFloat)blurRadius
+{
+  _backgroundBlurRadius = blurRadius;
+
+  if (_backgroundBlur == nil) {
+    _backgroundBlur = [RCTBlurFilter new];
+    _backgroundBlur.name = @"blur";
+
+    [self ensureLayerExists];
+    self.backgroundFilters = @[_backgroundBlur];
+  }
+  
+  [self.layer setValue:@(blurRadius)
+            forKeyPath:@"backgroundFilters.blur.inputRadius"];
+}
+
 #pragma mark - Rendering
 
 - (void)reactSetFrame:(CGRect)frame

React/Views/RCTViewManager.m

@@ -102,6 +102,7 @@ - (RCTShadowView *)shadowView
 // RCT_REMAP_VIEW_PROPERTY(onMagicTap, reactAccessibilityElement.onMagicTap, RCTDirectEventBlock)
 RCT_REMAP_VIEW_PROPERTY(testID, reactAccessibilityElement.accessibilityIdentifier, NSString)
 
+RCT_EXPORT_VIEW_PROPERTY(backgroundBlurRadius, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, NSColor)
 RCT_REMAP_LAYER_PROPERTY(backfaceVisibility, doubleSided, css_backface_visibility_t)
 RCT_EXPORT_LAYER_PROPERTY(opacity, float)