Add support for fadeDuration.

[tianqiwuben]

Right now it's inconsistent for behaviors between iOS and Android, and my app would flash when the image is loaded.

[DylanVann]

Yeah this should be supported. Adding this as a feature request.

This could also be added as a feature for iOS: https://stackoverflow.com/questions/11869390/ios-sdwebimage-fade-in-new-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

[nehacs09]

@DylanVann Are we planning to implement this?

[alexandrius]

Here's the rough patch I created we can use before it get's implemented

diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java
index 757b99f..3183633 100644
--- a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java
+++ b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java
@@ -10,6 +10,7 @@ import com.bumptech.glide.load.model.GlideUrl;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
+import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -103,6 +104,7 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
                     //    - data:image/png;base64
                     .load(imageSource.getSourceForLoad())
                     .apply(FastImageViewConverter.getOptions(source))
+                    .transition(DrawableTransitionOptions.withCrossFade())
                     .listener(new FastImageRequestListener(key))
                     .into(view);
         }
diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h
index b336d1a..6691358 100644
--- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h
+++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.h
@@ -2,21 +2,15 @@
 
 #import <SDWebImage/UIImageView+WebCache.h>
 #import <SDWebImage/SDWebImageDownloader.h>
-
-// Import from the FLAnimated image CocoaPod if it's available.
-#if __has_include(<FLAnimatedImage/FLAnimatedImageView.h>)
-#import <FLAnimatedImage/FLAnimatedImageView.h>
-// Import from the version within SDWebImage otherwise.
-#elif __has_include(<SDWebImage/FLAnimatedImageView.h>)
-#import <SDWebImage/FLAnimatedImageView.h>
-#endif
-
+#import <SDWebImage/SDWebImageTransition.h>
+#import <SDWebImage/FLAnimatedImageView+WebCache.h>
+#import <SDWebImage/UIView+WebCache.h>
 #import <React/RCTComponent.h>
 #import <React/RCTResizeMode.h>
 
 #import "FFFastImageSource.h"
 
-@interface FFFastImageView : FLAnimatedImageView
+@interface FFFastImageView : UIImageView
 
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadStart;
 @property (nonatomic, copy) RCTDirectEventBlock onFastImageProgress;
diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
index 5fa8d91..612cf22 100644
--- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
+++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
@@ -140,6 +140,7 @@ - (void)setSource:(FFFastImageSource *)source {
         //   - file:///var/containers/Bundle/Application/50953EA3-CDA8-4367-A595-DE863A012336/ReactNativeFastImageExample.app/assets/src/images/fields.jpg
         //   - file:///var/containers/Bundle/Application/545685CB-777E-4B07-A956-2D25043BC6EE/ReactNativeFastImageExample.app/assets/src/images/plankton.gif
         //   - file:///Users/dylan/Library/Developer/CoreSimulator/Devices/61DC182B-3E72-4A18-8908-8A947A63A67F/data/Containers/Data/Application/AFC2A0D2-A1E5-48C1-8447-C42DA9E5299D/Documents/images/E1F1D5FC-88DB-492F-AD33-B35A045D626A.jpg"
+        self.sd_imageTransition = SDWebImageTransition.fadeTransition;
         [self sd_setImageWithURL:_source.url
                 placeholderImage:nil
                          options:options

[grifotv]

Based on my tests, the fadeDuration prop doesn't work in Android when using the FastImage component, only when using the React Native Image one. I'd say FastImage has no fadeDuration supported in any platform.

[HugoGresse]

I've updated the patch above, just place it to patches/ folder and use npm patch-package

react-native-fast-image+8.6.3.patch