how to switch the blurType between 'light/dark/...' and 'none'

[12343954]

how to switch the blurType between 'light/dark/...' and 'none' ?

i want to switch ,but not static effect

thank you

[Kureev]

What you mean by switch?

If you want a transition, then there is no support for it (afaik apple doesn't provide us any hooks for animating blur, let me know if I'm wrong).

If you're talking about switching a type of blur, then it can be done as a usual react component prop change.

[wokalski]

@Kureev I think there's a very non-ideal, hacky, and non idiomatic but working solution when it comes to animations. We could add an optional prop let's say animation which is an object that contains two fields:

• duration
• type - blurIn or blurOut

When the native component receives this prop it animates the blur view or just displays it if the prop is not set.

[Kureev]

I'm not sure if we can animate this. As I mentioned back in the README, this implementation is based on UIVisualEffectView which doesn't support animations afaik.

[wokalski]

It does. I am using it in an app. It is supported since iOS 9. The API looks like this:

UIVisualEffectView *view = [[UIVisualEffectView alloc] init];
...
[UIView animateWithDuration:0.25 animations:^{
      blurView.effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
}];

[Kureev]

Oh, didn't knew that, thanks!

Could you submit a PR? I would be happy to merge it in!

[wokalski]

Sure, I'll play with it later this week. 👍

[wokalski]

This is what I came up with for a similar problem in my app. This API has to be imperative due to the nature of UIKit.

The JavaScript API looks like this:

// blurView is a reference to a component
blurView.fadeIn(
  duration,
  callback
)

Objective-C implementation

``` objc RCT_EXPORT_METHOD(fadeIn:(nonnull NSNumber *)reactTag duration:(CGFloat) duration completion:(RCTResponseSenderBlock)callback) { [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary *viewRegistry) { AnimatedBlurView *view = (AnimatedBlurView *)viewRegistry[reactTag]; if ([view isKindOfClass:[AnimatedBlurView class]]) { view.blurView.effect = nil; [UIView animateWithDuration:duration animations:^{ view.blurView.effect = [view effect]; } completion:^(BOOL finished) { if (callback) { callback(@[]); } }]; } }]; } // Similar one for fadeOut ```

Let me know what you think @Kureev

[Kureev]

LGTM! I have to try it on my machine first, but I don't see any issues so far

[wokalski]

@Kureev don't bother! If you think the API is OK, I will submit a proper PR.

[Kureev]

Well, I'd like to propose something, actually:

Instead of using imperative API we can expose and with animation parameters required. What do you think?

P.S. What about opening a new issue and continue discussion there?