CODEWITHSUNDEEP
animationreact-nativereact-animated
David
David

Reputation: 453

Animate blurRadius property with react-native

I started to animate an image in my react-native project but somehow I can't animate the blurRadius property. Translate and Scale are working just fine. Here is the code I use to interpolate values for blur, scale and translate :

// Compute image position
const imageTranslate = this.state.scrollY.interpolate({
  inputRange: [-IMAGE_MAX_HEIGHT, 0, IMAGE_MAX_HEIGHT],
  outputRange: [IMAGE_MAX_HEIGHT / 2, 0, -IMAGE_MAX_HEIGHT / 3],
  extrapolate: 'clamp',
});
// Compute image blur
const imageBlur = this.state.scrollY.interpolate({
  inputRange: [0, IMAGE_MAX_HEIGHT],
  outputRange: [0, 100],
  extrapolate: 'clamp',
});
// Compute image scale
const imageScale = this.state.scrollY.interpolate({
  inputRange: [-IMAGE_MAX_HEIGHT, 0, IMAGE_MAX_HEIGHT],
  outputRange: [2, 1, 1],
  extrapolate: 'clamp',
});

And this is my Image :

return (
  <Animated.Image
    blurRadius={imageBlur}
    source={this.props.imgSrc}
    style={[
      animatedImageStyles.backgroundImage,
      { transform: [{ translateY: imageTranslate }, { scale: imageScale }] }
    ]}
  />
);

I binded the this.state.scrollY value on a ScrollView scroll.

Upvotes: 4

Views: 2597

Answers (2)

mcnk
mcnk

Reputation: 2331

You can add an event listener to get animated blur value and change the state. Then put your blurValue state in blurRadius prop.

this.state.blurAnimation.addListener(({value}) => this.setState({blurValue:value}));

Upvotes: 1

sinewave440hz
sinewave440hz

Reputation: 1365

The timing of your issue indicates that the solution should be as simple as upgrading React Native. Blur radius support on images was added in version 0.46. I have just created a new react-native app and implemented 3 animations on an image, one of which was blurRadius, and everything works fine. This is with version 0.49.5. Upgrading should solve your issue!

Note that there currently seems to be an issue on Android, see https://github.com/facebook/react-native/issues/16494

I noticed that blurRadius doesn't work either on iOS with RN 0.48, but 0.49.5 (and possibly earlier) is fine. There's no mention of blurRadius in the release notes for 0.48 and 0.49.

Upvotes: 0

Related Questions