feat(iOS and Android): fade duration (#33)

* feat(iOS): fade duration * feat(Android): fade duration
duguyihou · Nov 16, 2023 · 5de2d95 · 5de2d95
1 parent 50d18f4
commit 5de2d95
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/android/src/main/java/com/turboimage/TurboImageViewManagerBase.kt b/android/src/main/java/com/turboimage/TurboImageViewManagerBase.kt
@@ -3,6 +3,7 @@ package  com.turboimage
 import android.widget.ImageView
 import android.widget.ImageView.ScaleType
 import coil.Coil
+import coil.drawable.CrossfadeDrawable
 import coil.request.Disposable
 import coil.request.ImageRequest
 import com.facebook.react.uimanager.SimpleViewManager
@@ -24,7 +25,6 @@ abstract class TurboImageViewManagerBase<T> : SimpleViewManager<T>() where T : I
   override fun onAfterUpdateTransaction(view: T) {
     super.onAfterUpdateTransaction(view)
     val request = requestBuilder.build()
-    requestBuilder.crossfade(5000)
     disposable = Coil.imageLoader(view.context).enqueue(request)
   }
 
@@ -47,13 +47,14 @@ abstract class TurboImageViewManagerBase<T> : SimpleViewManager<T>() where T : I
 
   @ReactProp(name = "base64Placeholder")
   fun setBase64Placeholder(view: T, base64Placeholder: String?) {
-    if (base64Placeholder == null) {
-      requestBuilder.placeholder(null)
-    } else {
-      requestBuilder.placeholder(
-        TurboImageBase64.base64ToDrawable(view.context, base64Placeholder)
-      )
-    }
+    requestBuilder.placeholder(
+      base64Placeholder?.let { TurboImageBase64.base64ToDrawable(view.context, it) }
+    )
+  }
+
+  @ReactProp(name = "fadeDuration")
+  fun setCrossfade(view: T, crossfade: Int = CrossfadeDrawable.DEFAULT_DURATION) {
+    requestBuilder.crossfade(crossfade)
   }
 
   companion object {

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
 import TurboImage from 'react-native-turbo-image';
-import { images, base64Placeholder } from './mockData';
+import { base64Placeholder, images } from './mockData';
 
 export default function App() {
   return (
@@ -18,6 +18,7 @@ export default function App() {
             style={styles.box}
             resizeMode="contain"
             showActivityIndicator
+            fadeDuration={10}
             base64Placeholder={base64Placeholder}
           />
         ))}

diff --git a/ios/TurboImage/TurboImageView.swift b/ios/TurboImage/TurboImageView.swift
@@ -32,6 +32,8 @@ class TurboImageView : UIView {
 
   @objc var base64Placeholder: String?
 
+  @objc var fadeDuration: NSNumber = 0.5
+
   override init(frame: CGRect) {
     super.init(frame: frame)
     addSubview(lazyImageView)
@@ -60,7 +62,7 @@ fileprivate extension TurboImageView {
     else { return }
 
     KF.url(url)
-      .fade(duration: 5)
+      .fade(duration: TimeInterval(truncating: fadeDuration))
       .placeholder(UIImage(base64Placeholder: base64Placeholder))
       .onSuccess({ result in
         self.onSuccess?(["result": result])

diff --git a/ios/TurboImage/TurboImageViewManager.m b/ios/TurboImage/TurboImageViewManager.m
@@ -14,5 +14,7 @@ @interface RCT_EXTERN_MODULE(TurboImageViewManager, RCTViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(base64Placeholder, NSString)
 
+RCT_EXPORT_VIEW_PROPERTY(fadeDuration, NSNumber)
+
 @end
 
diff --git a/src/TurboImage.d.ts b/src/TurboImage.d.ts
@@ -4,6 +4,7 @@ export interface TurboImageProps extends AccessibilityProps, ViewProps {
   resizeMode?: ResizeMode;
   showActivityIndicator?: boolean;
   base64Placeholder?: string;
+  fadeDuration?: number;
   onError?: (result: { nativeEvent: { error: string } }) => void;
   onSuccess?: (result: {
     nativeEvent: {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,5 +14,7 @@ @interface RCT_EXTERN_MODULE(TurboImageViewManager, RCTViewManager)

		RCT_EXPORT_VIEW_PROPERTY(base64Placeholder, NSString)

		RCT_EXPORT_VIEW_PROPERTY(fadeDuration, NSNumber)

		@end