React-native-fast-image: Animate in loaded images.

[grundmanise]

It would be great if an image appears with an animation when it loads.

[DylanVann]

I'm considering adding a couple more exports to this library to support common use cases. Potentially animate in and loading indication. I think for animate in it would just take a fadeInDuration prop and then fade in over that period of time. Default would be no fade. The export would be something like FastImageAnimated.

[shinyford]

Question for @DylanVann: images already seem to fade in once loaded on Android (with no way to switch that off?). Is that a Glide thing? And if so, is there a way to make the image appearance immediate, as with the iOS implementation?

[belens]

@DylanVann I have a fade animation for FastImage, you want it as a FastImageAnimated component? I can create a pull request.

[yasir-netlinks]

@belens hi there, could you share you code, Im looking on how to add the fade in animation on image load

[timothystewart6]

I did it like this:

  state = {
    imageScaleValue: new Animated.Value(0),
  }

  onImageLoadEnd = () => {
    Animated.timing(this.state.imageScaleValue, {
      toValue: 1,
      duration: 150,
      delay: 5,
      useNativeDriver: true,
    }).start()
  }


 <Animated.View style={{ opacity: this.state.imageScaleValue }}>
              <FastImage
                    style={styles.image}
                    source={{
                      uri: item.imageUrl,
                      cache: FastImage.cacheControl.web,
                    }}
                    resizeMode={FastImage.resizeMode.contain}
                    onLoadEnd={() => this.onImageLoadEnd()}
                />
</Animated.View>

@yasir-netlinks
Works great!