[Image] Resizing image with Animation (with resizeMode="cover") is glitchy

You can see the issue here:

Video of Issue (if gif is not clear): http://s.sk3vy.com/cCZ0

(you can see that it glitches a little bit as it resizes)

Code-wise, all I’m doing is doing:

Animated.parallel([
  Animated.spring(
    this.state.imageOverlay.position, {
      toValue: { x: 0, y: 0 },
      friction: 20,
      tension: 220
  }),
  Animated.spring(
    this.state.imageOverlay.size, {
      toValue: { x: this.screenWidth, y: this.screenHeight },
      friction: 20,
      tension: 220
  })
]).start();

Nothing out of the ordinary there.

In debugging this issue…it seems it may have something to do with this:

https://github.com/facebook/react-native/blob/757d6d204ae2d743634af64e3f78a4aad9d53f70/Libraries/Image/RCTImageView.m#L174-L176

When I don’t reload the image (comment out line 175), it’s smooth as butter, as you might expect. Obviously that’s not a solution here, but I think it does give insight into the problem.

It seems like it would be good to somehow (perhaps optionally) defer the reloading and resampling of the image until after an animation has completed.

[ide]

awesometown population: nicklockwood

[skevy]

@nicklockwood new code works flawlessly with my use-case. It’ll make it into the next app store update. Thanks! 👍