DylanVann / react-native-fast-image

🚩 FastImage, performant React Native image component.
MIT License
8.09k stars 1.47k forks source link

Feat: Blur support Android & Ios. #993

Open HyopeR opened 1 year ago

HyopeR commented 1 year ago
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
android ios
cygnet-umshah commented 1 year ago

It is not working for me.

HyopeR commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

I will check and also get back to you

cygnet-umshah commented 1 year ago

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

Screenshot 2023-07-05 at 1 41 39 PM
HyopeR commented 12 months ago

@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 commented 10 months ago

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

vinnyA3 commented 10 months ago

is this working yet?

HyopeR commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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

HyopeR commented 9 months ago

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

Tchaikovsky1114 commented 3 months ago

that's can not apply RN version. 68.2

HyopeR commented 3 months ago

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

Rowb commented 2 weeks ago

@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:

HyopeR commented 1 week ago

@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.