Daniel Matthews Daniel Matthews - 2 months ago 49
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

blurRadius
property, which i am binding to the
blurRadius={this.state.blurRadius}
prop on my
<Image>
component.

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

I've also set the
scrollEventThrottle={30}
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
setState
?

Could it be that the image is just too large?

Answer

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.