It would be great if an image appears with an animation when it loads.
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.
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?
@DylanVann I have a fade animation for FastImage, you want it as a FastImageAnimated component? I can create a pull request.
@belens hi there, could you share you code, Im looking on how to add the fade in animation on image load
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!
Most helpful comment
@DylanVann I have a fade animation for FastImage, you want it as a FastImageAnimated component? I can create a pull request.