search

Kureev / react-native-blur

React Native Blur component
MIT License
3.74k stars 555 forks source link

Is it possible to use BlurView with Reanimated2 to have it go from blur to no blur at all? #594

Open lposa opened 10 months ago

lposa commented 10 months ago

`const animatedProps = useAnimatedProps(() => { const animatedBlurRadius = interpolate( blurOverlayOpacity.value, [0, 1], [100, 0], Extrapolate.CLAMP )

return {
  blurRadius: animatedBlurRadius,
}

})

<AnimatedBlurView animatedProps={animatedProps} style={[className.overlay, animatedPhaseRotation]} /> `

This is not working.

christian-hess-94 commented 10 months ago

I managed to put the blur inside of an AnimatedView, and change the opacity of that. However that caused some issues with the blur rendering on top of a few items on Android

kostas64 commented 7 months ago

I managed to put the blur inside of an AnimatedView, and change the opacity of that. However that caused some issues with the blur rendering on top of a few items on Android

I have the same problem on Android. When i interpolate the opacity based on toast position the background is strange. It has the correct color only when opacity reach value 1.

fedpre commented 4 months ago

It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?

kostas64 commented 4 months ago

It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?

It has to do with Android Blur implementation. Android use bitmap to draw canvas to create this blur effect which is costly in performance. If you notice for example Instagram is using Blur effect only in image preview for Android, simple case, messenger doesn't use at all blur effect on header in comparison with iOS. So they decide to use it in a way that will not depict performance. So i would suggest to do the same. It doesnt mean because you are developing a hybrid app should be the same in both platforms. If you want to use it because you like it, try to avoid complicate calculations like interpolations or similar, at least on Android. In iOS blur effect is support performant, because iOS is using blur in a lot of places in the OS. They have the patent :P Cheers!

fedpre commented 4 months ago

It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?

It has to do with Android Blur implementation. Android use bitmap to draw canvas to create this blur effect which is costly in performance. If you notice for example Instagram is using Blur effect only in image preview for Android, simple case, messenger doesn't use at all blur effect on header in comparison with iOS. So they decide to use it in a way that will not depict performance. So i would suggest to do the same. It doesnt mean because you are developing a hybrid app should be the same in both platforms. If you want to use it because you like it, try to avoid complicate calculations like interpolations or similar, at least on Android. In iOS blur effect is support performant, because iOS is using blur in a lot of places in the OS. They have the patent :P Cheers!

Thank you so much for the quick response! That's what I figured and told my employer, but I was curios on the deeper logic behind. We went with some opacity (which is not the same but good enough for now) and ti works fine!

kostas64 commented 4 months ago

It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?

It has to do with Android Blur implementation. Android use bitmap to draw canvas to create this blur effect which is costly in performance. If you notice for example Instagram is using Blur effect only in image preview for Android, simple case, messenger doesn't use at all blur effect on header in comparison with iOS. So they decide to use it in a way that will not depict performance. So i would suggest to do the same. It doesnt mean because you are developing a hybrid app should be the same in both platforms. If you want to use it because you like it, try to avoid complicate calculations like interpolations or similar, at least on Android. In iOS blur effect is support performant, because iOS is using blur in a lot of places in the OS. They have the patent :P Cheers!

Thank you so much for the quick response! That's what I figured and told my employer, but I was curios on the deeper logic behind. We went with some opacity (which is not the same but good enough for now) and ti works fine!

Only experienced developers notice these details

fedpre commented 4 months ago

It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?

It has to do with Android Blur implementation. Android use bitmap to draw canvas to create this blur effect which is costly in performance. If you notice for example Instagram is using Blur effect only in image preview for Android, simple case, messenger doesn't use at all blur effect on header in comparison with iOS. So they decide to use it in a way that will not depict performance. So i would suggest to do the same. It doesnt mean because you are developing a hybrid app should be the same in both platforms. If you want to use it because you like it, try to avoid complicate calculations like interpolations or similar, at least on Android. In iOS blur effect is support performant, because iOS is using blur in a lot of places in the OS. They have the patent :P Cheers!

Thank you so much for the quick response! That's what I figured and told my employer, but I was curios on the deeper logic behind. We went with some opacity (which is not the same but good enough for now) and ti works fine!

Only experienced developers notice these details

Thanks! 🙏