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

[lposa]

`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]

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]

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]

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]

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]

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]

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]

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! 🙏