Daniel Matthews Daniel Matthews - 6 months ago 105
React JSX Question

React native - animating the blurRadius of an Image

I have a "cover" image for the top of one of my views that i'd love to be able to blur out as you scroll it out of view as a cool effect.

My state contains a

property, which i am binding to the
prop on my

I have a
and am monitoring when it's scrolled with
, where i am calling
setState({blurRadius: value})
being the distance that you've scrolled the view.

I've also set the
prop on the scrollview so that i'm receiving the event regularly as the user scrolls.

The issue seems to be that the blurRadius updates but after a significant delay - and only to the maximum value. Am i missing something in order to make the image apply the new blurRadius with every call of

Could it be that the image is just too large?


You can try using setNativeProps instead of setState to see if the performance improves. You just need to give your Image a ref.

this.refs.myImage.setNativeProps({ blurRadius: myValue });

Reducing the image size would also help as it would not need to blur as many pixels.