Feat: Blur support Android & Ios.

[HyopeR]

Hello everyone.

I recently had to develop a blur for this package in a project that works on both platforms. There were several pull requests and issues opened for this, but none of them were fully completed.

Usage example

<FastImage
    style={{width: 100, height: 100}}
    source={source}
    blurRadius={25}
/>

Related pull requests

https://github.com/DylanVann/react-native-fast-image/pull/591 https://github.com/DylanVann/react-native-fast-image/pull/531 https://github.com/DylanVann/react-native-fast-image/pull/157

Related issues

https://github.com/DylanVann/react-native-fast-image/issues/127 https://github.com/DylanVann/react-native-fast-image/issues/827 https://github.com/DylanVann/react-native-fast-image/issues/801 https://github.com/DylanVann/react-native-fast-image/issues/726 https://github.com/DylanVann/react-native-fast-image/issues/604 https://github.com/DylanVann/react-native-fast-image/issues/50

Outputs

Android	Ios

[cygnet-umshah]

It is not working for me.

[HyopeR]

@cygnet-umshah I am using it in an application that I have brought live. I have verified that it is successful in real device and simulator tests. On which device did you try it?

Can you do a test with the fork I created, in order to reach a definite conclusion? (Main branch) I changed the way it is loaded in the main branch. You can test it directly by executing

npm i https://github.com/HyopeR/react-native-fast-image

Delete and reinstall pods for ios. Don't forget to clean gradlew for android.

[cygnet-umshah]

I did the same and actually I forked library and then merge your PR into it but blur radius does not working. I am using ProgressiveFastImage so FastImage along with animated. also try without that as well still no behavior change. I need my background to be blur.

Android solution works fine but not iOS.

[cygnet-umshah]

I will check and also get back to you

[cygnet-umshah]

Not able to install from your repository it is giving error.

[HyopeR]

@cygnet-umshah

Hello, you are right. I haven't tested this in a project where I use typescript. I think there was a problem with the version of bob builder.

I downgraded the package and tested it. You shouldn't encounter a typescript error right now. Can you try again when you have time?

npm i https://github.com/HyopeR/react-native-fast-image

[Johnathon332]

I just tried again and it doesn't work, I get the same error as above

[vinnyA3]

is this working yet?

[HyopeR]

I am currently using this repository in my 2 projects that are live. I couldn't reproduce the typescript error mentioned above in my local.

I only have one idea for this. If you try to install a package using 'yarn' in the project in any github repository it is a known bug that it ignores some fields contained in 'package.json'. The above issue may be caused by this. (NOTE: This does not apply to Yarn Berry.)

Here is the topic; https://github.com/yarnpkg/yarn/issues/2822

@vinnyA3 If you are using npm, pnpm or yarn/berry in your project, can you try installing from here?

npm i https://github.com/HyopeR/react-native-fast-image

If you have the same error, I will try to solve the typescript problem of the pull request.

[vinnyA3]

Interesting 🤔 @HyopeR -- okie, thanks for this feature request by the way - I am looking to try in one of my projects, and will most likely try a patch here.

That said, I'll be happy to see if I can reproduce this error on a clean project. I'll use different versions of yarn, as well as npm, to see.

[JoeDareZone]

It's working for me! Using Expo Dev Client and TypeScript. Thanks a million @HyopeR

[HyopeR]

@JoeDareZone I'm glad it worked. Thanks for testing.

[Tchaikovsky1114]

that's can not apply RN version. 68.2

[HyopeR]

@Tchaikovsky1114 What do you mean? Blur feature not working on React Native 0.68.2+? Or do I have a different compilation problem?

[Rowb]

@HyopeR I have issue with your fork

[!] CocoaPods could not find compatible versions for pod "SDWebImageWebPCoder": In snapshot (Podfile.lock): SDWebImageWebPCoder (= 0.8.5, ~> 0.8.4)

In Podfile: RNFastImage (from ../node_modules/react-native-fast-image) was resolved to 8.6.3, which depends on SDWebImageWebPCoder (~> 0.14)

You have either:

• out-of-date source repos which you can update with pod repo update or with pod install --repo-update.
• changed the constraints of dependency SDWebImageWebPCoder inside your development pod RNFastImage. You should run pod update SDWebImageWebPCoder to apply changes you've made.

[HyopeR]

@Rowb I use the main branch in my fork for my own projects. If you have tried this branch, it is natural that various dependencies have been updated.

This pull request was made with the feature/blur fork. There are no dependency changes in this fork. If you are working with the main branch, update your dependencies.