Merge pull request #102 from jakehasler/feature-blur-amount

Ability to Adjust Blur Amount

README.md

@@ -47,7 +47,7 @@ const Menu = React.createClass({
   render() {
     return (
       <Image source={{uri}} style={styles.menu}>
-        <BlurView blurType="light" style={styles.blur}>
+        <BlurView blurType="light" blurAmount={10} style={styles.blur}>
           <Text>Hi, I am a tiny menu item</Text>
         </BlurView>
       </Image>
@@ -82,7 +82,10 @@ const Menu = React.createClass({
   - `xlight` - extra light blur type
   - `light` - light blur type
   - `dark` - dark blur type
+- `blurAmount` (Number) - blur amount effect
+  - `0-100` - Adjusts blur intensity
 
+*Note: `blurAmount` does not refresh with Hot Reloading. You must a refresh the app to view the results of the changes*
 
 ### Android
 
@@ -138,7 +141,7 @@ public class MainApplication extends Application implements ReactApplication {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage(), 
+          new MainReactPackage(),
           new BlurViewPackage()
       );
     }

ios/BlurAmount.m

@@ -0,0 +1,44 @@
+#import <UIKit/UIKit.h>
+#import <objc/runtime.h>
+
+@interface UIBlurEffect (Protected)
+@property (nonatomic, readonly) id effectSettings;
+@end
+
+@interface BlurAmount : UIBlurEffect
+@property (nonatomic, copy) NSNumber *blurAmount;
+@end
+
+@implementation BlurAmount
+
+  NSNumber *localBlurAmount;
+
++ (instancetype)effectWithStyle:(UIBlurEffectStyle)style
+{
+    id result = [super effectWithStyle:style];
+    object_setClass(result, self);
+
+    return result;
+}
+
+- (id)effectSettings
+{
+    id settings = [super effectSettings];
+    [settings setValue:localBlurAmount forKey:@"blurRadius"];
+    return settings;
+}
+
+- (id)copyWithZone:(NSZone*)zone
+{
+    id result = [super copyWithZone:zone];
+    object_setClass(result, [self class]);
+    return result;
+}
+
++ (id)updateBlurAmount:(NSNumber*)blurAmount
+{
+    localBlurAmount = blurAmount;
+    return blurAmount;
+}
+
+@end

ios/BlurView.h

@@ -3,5 +3,6 @@
 @interface BlurView : UIView
 
 @property (nonatomic, copy) NSString *blurType;
+@property (nonatomic, copy) NSNumber *blurAmount;
 
-@end
+@end

ios/BlurView.m

@@ -1,7 +1,10 @@
 #import "BlurView.h"
+#import "BlurAmount.m"
+
 
 @implementation BlurView {
   UIVisualEffectView *_visualEffectView;
+  BlurView *blurEffect;
 }
 
 - (void)setBlurType:(NSString *)blurType
@@ -10,25 +13,28 @@
     [_visualEffectView removeFromSuperview];
   }
 
-  UIBlurEffect *blurEffect;
-
   if ([blurType isEqual: @"xlight"]) {
-    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
+    blurEffect = [BlurAmount effectWithStyle:UIBlurEffectStyleExtraLight];
   } else if ([blurType isEqual: @"light"]) {
-    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
+    blurEffect = [BlurAmount effectWithStyle:UIBlurEffectStyleLight];
   } else if ([blurType isEqual: @"dark"]) {
-    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
+    blurEffect = [BlurAmount effectWithStyle:UIBlurEffectStyleDark];
   } else {
-    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
+    blurEffect = [BlurAmount effectWithStyle:UIBlurEffectStyleDark];
   }
 
-  _visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
 }
 
--(void)layoutSubviews
+- (void)setBlurAmount:(NSNumber *)blurAmount
+{
+    blurEffect = [BlurAmount updateBlurAmount:blurAmount];
+}
+
+
+- (void)layoutSubviews
 {
   [super layoutSubviews];
-
+  _visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
   _visualEffectView.frame = self.bounds;
   [self insertSubview:_visualEffectView atIndex:0];
 }

ios/BlurViewManager.m

@@ -11,5 +11,6 @@ RCT_EXPORT_MODULE();
 }
 
 RCT_EXPORT_VIEW_PROPERTY(blurType, NSString);
+RCT_EXPORT_VIEW_PROPERTY(blurAmount, NSNumber);
 
 @end

src/BlurView.ios.js

@@ -17,6 +17,7 @@ class BlurView extends Component {
 
 BlurView.propTypes = {
   blurType: PropTypes.string,
+  blurAmount: PropTypes.number,
 };
 
 const NativeBlurView = requireNativeComponent('BlurView', BlurView);