How to animate the opacity of a CachedImage

[lukasreusch]

In my ProgressiveImage I try to replace the Image-components with the CachedImages. The problems are the animations.

This returns in an error Attempted to assign to readonly property.

<CachedImage
              renderImage={ props => { return <Animated.Image /> }}
              source={this.props.imageSource}
              style={[{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, zIndex: 1 }, {opacity: this.state.imageOpacity}]}
              onLoad={() => this.onLoadImage()}
            />

And if I try this, there is no error but the images are appearing directly. Setting the opacity in the Animated.Image also has no effect, so of course the animation could not have any effect to.

<CachedImage
              renderImage={ props => { return <Animated.Image style={{opacity: this.state.imageOpacity}} /> }}
              source={this.props.imageSource}
              style={[{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, zIndex: 1 }]}
              onLoad={() => this.onLoadImage()}
            />

Anybody here who archived to animate the CachedImages?

[baryshok]

@goinnovative you should just make an animated component out of CachedImage component:

const AnimatedCachedImage = Animated.createAnimatedComponent(CachedImage);

and after that animate its opacity in its style prop:

<AnimatedCachedImage
  ...
  style={[ style, { opacity: this.animationValue }]}
>

[shashfrankenstien]

@baryshok's solution didn't work. Shows blank in my react-native-snap-carousel. When I scroll my Carousel it just appears with no animation.

Edit: I was able to animate the opacity by wrapping CachedImage inside an Animated.View. But now I'm stuck trying to animate the width and height.