Add blur radius for iOS

[angelo-hub]

This adds support for Blur Radius for iOS!

[bricker]

Reset package-lock.json, doesn't seem related to the blurRadius changes

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.11%. Comparing base (e94e6fe) to head (9165e5e).
Report is 93 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #591   +/-   ##
=======================================
  Coverage   94.11%   94.11%           
=======================================
  Files           1        1           
  Lines          17       17           
=======================================
  Hits           16       16           
  Misses          1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[perrosnk]

Any updates on this?

[angelo-hub]

@perrosnk The maintainers have provided no feedback 🤷‍♂ I'd like to get this change in so I can stop using a fork of the project

[jfrolich]

Would be great to have this supported.

[BigPun86]

+1

[khalidahmedshalabi]

Any updates?

[nica0012]

Any updates on this? There are so many benefits to blurRadius. Right now I am conditionally rendering an image vs FastImage just to show a blur on the thumbnail (when the full resolution has not loaded yet). This creates duplication, but worse it usually takes the thumbnail longer to load vs the full res image (With FastImage) which defeats the purpose of trying to show the user that the image is loading... Props to the performance, but a minor feature like this would make such a huge difference! Keep up the great work. @DylanVann

[danleveille]

As a workaround, which has some fallbacks including less control over the blur, I implemented a <BlurView> over the image using @react-native-community/blur. It's a pain, but worked in my case.

[angelo-hub]

@danleveille while good, I would definitely say implementing the blur natively in iOS (currently the only platform this PR supports) would be much more performant than nesting the view, and allows a progressive image loading like @nica0012, that's actually the reason we forked and did this, to do a seamless transition from blurred thumbnail to full view, while still taking advantage of the sdwebimage cache and the render performance

[jfrolich]

@danleveille while good, I would definitely say implementing the blur natively in iOS (currently the only platform this PR supports) would be much more performant than nesting the view, and allows a progressive image loading like @nica0012, that's actually the reason we forked and did this, to do a > seamless transition from blurred thumbnail to full view, while still taking advantage of the sdwebimage cache and the render performance

How do you handle a preview image to be blurred on load, but if the full image is in the cache not to show the blur and immediately draw the full image? Is that supported in this fork? If the blur is drawn every time it would cause a lot of distracting flicker.

[nica0012]

Is there a way I can use this before it is merged? Is anyone using a fork of this with no issues? I've never really used a fork before I've just been waiting for this for sooo long I think I'll give it a shot if possible.

[byteab]

just wrap it with react-native-blur

[byteab]

import React from 'react'
import {BlurView, BlurViewProperties} from '@react-native-community/blur'
import {View, ViewStyle} from 'react-native'
import FastImage, {FastImageProps} from 'react-native-fast-image'

interface IProps
  extends Pick<
    FastImageProps,
    'source' | 'resizeMode' | 'onLoad' | 'resizeMode'
  > {
  // for BlurView
  blurType: BlurViewProperties['blurType']
  blurAmount: BlurViewProperties['blurAmount']
  reducedTransparencyFallbackColor: BlurViewProperties['reducedTransparencyFallbackColor']
  blurStyle: BlurViewProperties['style']
  // for container
  container: ViewStyle
  // for image view
  imageStyle: FastImageProps['style']
}

export const FastImageBlurred = (props: IProps) => {
  return (
    <View style={props.container}>
      <BlurView
        style={props.blurStyle}
        blurType={props.blurType}
        blurAmount={props.blurAmount}
        reducedTransparencyFallbackColor={
          props.reducedTransparencyFallbackColor
        }
      />
      <FastImage
        source={props.source}
        style={props.imageStyle}
        resizeMode={props.resizeMode}
      />
    </View>
  )
}

[nica0012]

import React from 'react'
import {BlurView, BlurViewProperties} from '@react-native-community/blur'
import {View, ViewStyle} from 'react-native'
import FastImage, {FastImageProps} from 'react-native-fast-image'

interface IProps
  extends Pick<
    FastImageProps,
    'source' | 'resizeMode' | 'onLoad' | 'resizeMode'
  > {
  // for BlurView
  blurType: BlurViewProperties['blurType']
  blurAmount: BlurViewProperties['blurAmount']
  reducedTransparencyFallbackColor: BlurViewProperties['reducedTransparencyFallbackColor']
  blurStyle: BlurViewProperties['style']
  // for container
  container: ViewStyle
  // for image view
  imageStyle: FastImageProps['style']
}

export const FastImageBlurred = (props: IProps) => {
  return (
    <View style={props.container}>
      <BlurView
        style={props.blurStyle}
        blurType={props.blurType}
        blurAmount={props.blurAmount}
        reducedTransparencyFallbackColor={
          props.reducedTransparencyFallbackColor
        }
      />
      <FastImage
        source={props.source}
        style={props.imageStyle}
        resizeMode={props.resizeMode}
      />
    </View>
  )
}

Though that would work, it will increase my projects size and more packages to be installed, where as an update in RNFastImage would be much more ideal, and speedy!

[angelo-hub]

So we still use this branch at my company, but I just think it's funny that after a year the only real response was "add more React-native overhead and libraries to it". Restricting a basic feature like this because it doesn't support Android breaks the agreement that this is a drop-in replacement for the React Native Image object. For performance purposes, another library shouldn't be necessary and can result in an un-optimized experience since native code would likely not be doing the blurring effect

[angelo-hub]

Is there a way I can use this before it is merged? Is anyone using a fork of this with no issues? I've never really used a fork before I've just been waiting for this for sooo long I think I'll give it a shot if possible.

very late response but the fork we use works fine on react-native 0.59+

[MrXyfir]

It doesn't look like this package is very active anymore. It'd be nice if we could get a proper fork with active maintainers.

[dkunin9]

any idea on how to add blur support for Android? 🙂
would be really helpful

[todorone]

@DylanVann This is a pretty trivial, but very helpful update, is there anything that could be done to merge it?
I can create a new branch with this PR against the latest master if it will help(with @angelo-hub permission).

[mwegener-com]

What about android support?

[angelo-hub]

I sometimes still think about this PR and what could have been, oh well.

[nabilfreeman]

🤣

[angelo-hub]

What are you guys gonna get this PR's 3 year anniversery?

[moulie415]

For me personally I wanted more of a gaussian blur which I achieved with:

- (void)downloadImage:(FFFastImageSource *) source options:(SDWebImageOptions) options context:(SDWebImageContext *)context {
    __weak typeof(self) weakSelf = self; // Always use a weak reference to self in blocks
    id<SDImageTransformer> transformer = [SDImageBlurTransformer transformerWithRadius:_blurRadius];
    [self sd_setImageWithURL:_source.url
            placeholderImage:nil
                     options:options
                     context:@{SDWebImageContextImageTransformer: transformer}
                    progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
                        if (weakSelf.onFastImageProgress) {
                            weakSelf.onFastImageProgress(@{
                                                           @"loaded": @(receivedSize),
                                                           @"total": @(expectedSize)
                                                           });
                        }
                    } completed:^(UIImage * _Nullable image,
                                  NSError * _Nullable error,
                                  SDImageCacheType cacheType,
                                  NSURL * _Nullable imageURL) {
                        if (error) {
                            weakSelf.hasErrored = YES;
                                if (weakSelf.onFastImageError) {
                                    weakSelf.onFastImageError(@{});
                                }
                                if (weakSelf.onFastImageLoadEnd) {
                                    weakSelf.onFastImageLoadEnd(@{});
                                }
                        } else {
                            weakSelf.hasCompleted = YES;
                            [weakSelf sendOnLoad:image];
                            if (weakSelf.onFastImageLoadEnd) {
                                weakSelf.onFastImageLoadEnd(@{});
                            }
                        }
                    }];
}

[chramos]

any plan to merge it?
it is a really helpful feature

[MrXyfir]

react-native-fast-image is no longer maintained. Use expo-image.