React-native-fast-image: Replacing Animated.Image

[flikQ]

Hi,

I am currently working on an animation using the standard Image tag, I would like to use FastImage for these images however Animated.FastImage obviously doesn't work.

Doesn't anyone know a way to get this working?

[ahanriat]

const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);

[tyeon95]

@ahanriat I've tried this but I was not able to make it work - it shows blank (no image is shown).

<AnimatedFastImage
  style={[styles.image, { opacity: this.state.imageOpacity }, this.props.style]}
  source={{
    uri: this.props.imageSource,
    priority: FastImage.priority.normal,
  }}
  resizeMode={FastImage.resizeMode.cover}
  onLoad={() => this.onLoadImage()} //function call to Animated.timing on this.state.imageOpacity
/>

[ahanriat]

@tyeon95 Did you set height or width to your image style?

[mikehuebner]

There is a deeper issue with this where if the image is cached onLoad will not be called at all.

[digitaledge]

This actually works for me with const AnimatedImage = Animated.createAnimatedComponent(FastImage);

[DylanVann]

I believe all the involved issues have been resolved.

[tarangill]

It works, but when you change height and width with animation, the image is pixelated.