Animate blurRadius property with react-native

user_2182518 0
Viewed 2180

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.

react-animated react-native animation
2 Answers

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}));
user_50698660

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.

user_18616450
Related