diff --git a/README.md b/README.md index 605833b..275b423 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ const Menu = React.createClass({ render() { return ( - + Hi, I am a tiny menu item @@ -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 getPackages() { return Arrays.asList( - new MainReactPackage(), + new MainReactPackage(), new BlurViewPackage() ); } diff --git a/ios/BlurAmount.m b/ios/BlurAmount.m new file mode 100644 index 0000000..c5448f5 --- /dev/null +++ b/ios/BlurAmount.m @@ -0,0 +1,44 @@ +#import +#import + +@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 diff --git a/ios/BlurView.h b/ios/BlurView.h index f8fcd63..b0ac206 100644 --- a/ios/BlurView.h +++ b/ios/BlurView.h @@ -3,5 +3,6 @@ @interface BlurView : UIView @property (nonatomic, copy) NSString *blurType; +@property (nonatomic, copy) NSNumber *blurAmount; -@end \ No newline at end of file +@end diff --git a/ios/BlurView.m b/ios/BlurView.m index 450386d..135e1d2 100644 --- a/ios/BlurView.m +++ b/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]; } diff --git a/ios/BlurViewManager.m b/ios/BlurViewManager.m index 2f63c9e..991a562 100644 --- a/ios/BlurViewManager.m +++ b/ios/BlurViewManager.m @@ -11,5 +11,6 @@ RCT_EXPORT_MODULE(); } RCT_EXPORT_VIEW_PROPERTY(blurType, NSString); +RCT_EXPORT_VIEW_PROPERTY(blurAmount, NSNumber); @end diff --git a/src/BlurView.ios.js b/src/BlurView.ios.js index 875658d..48caaeb 100644 --- a/src/BlurView.ios.js +++ b/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);