react-native-fast-image
react-native-fast-image copied to clipboard
Add callback for preload completion.
We have several places in the app where we need to trigger image preloading. We can't do it all at one time, as we load resources along the way.
The issue here is that SDWebImage has a nasty side-effect built into it, it cancels any ongoing prefetch jobs when you call prefetchURLs. There's another variant of the method that has a completion block that returns the progress of the prefetch jobs. Would it be in any way possible to add support for a callback so that we could at least queue the preload calls in our end?
Haven't checked Glide if it supports similar behavior.
+1
Yeah this behavior is not ideal. A callback would be nice too. I'm considering trying out some other native library if there's one offering similar performance with a better API. See: https://github.com/DylanVann/react-native-fast-image/issues/13
SDWebImage
handles its core functionality really well though.
I'll add a note in the docs for now, and a link to that issue.
Any update on this? Could def use it in my app... Everything else is working great. Thanks for this awesome component
Any update on this?
updates?
this patch might help I ran into this, btw only works on ios
diff --git a/node_modules/react-native-fast-image/RNFastImage.podspec b/node_modules/react-native-fast-image/RNFastImage.podspec
index db0fada..cfcaed2 100644
--- a/node_modules/react-native-fast-image/RNFastImage.podspec
+++ b/node_modules/react-native-fast-image/RNFastImage.podspec
@@ -16,6 +16,6 @@ Pod::Spec.new do |s|
s.source_files = "ios/**/*.{h,m}"
s.dependency 'React-Core'
- s.dependency 'SDWebImage', '~> 5.11.1'
- s.dependency 'SDWebImageWebPCoder', '~> 0.8.4'
+ s.dependency 'SDWebImage', '5.16.0'
+ s.dependency 'SDWebImageWebPCoder', '0.11.0'
end
diff --git a/node_modules/react-native-fast-image/dist/index.d.ts b/node_modules/react-native-fast-image/dist/index.d.ts
index 5abb7c9..794e24a 100644
--- a/node_modules/react-native-fast-image/dist/index.d.ts
+++ b/node_modules/react-native-fast-image/dist/index.d.ts
@@ -94,7 +94,7 @@ export interface FastImageStaticProperties {
resizeMode: typeof resizeMode;
priority: typeof priority;
cacheControl: typeof cacheControl;
- preload: (sources: Source[]) => void;
+ preload: (sources: Source[]) => Promise<{noOfFinishedUrls: number, noOfSkippedUrls: number}>;
clearMemoryCache: () => Promise<void>;
clearDiskCache: () => Promise<void>;
}
diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m
index 84ca94e..6186fe4 100644
--- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m
+++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageViewManager.m
@@ -22,7 +22,7 @@ RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadEnd, RCTDirectEventBlock)
RCT_REMAP_VIEW_PROPERTY(tintColor, imageColor, UIColor)
-RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources)
+RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
{
NSMutableArray *urls = [NSMutableArray arrayWithCapacity:sources.count];
@@ -33,7 +33,12 @@ RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources)
[urls setObject:source.url atIndexedSubscript:idx];
}];
- [[SDWebImagePrefetcher sharedImagePrefetcher] prefetchURLs:urls];
+ [[SDWebImagePrefetcher sharedImagePrefetcher] prefetchURLs:urls progress:nil completed:^(NSUInteger noOfFinishedUrls, NSUInteger noOfSkippedUrls) {
+ resolve(@{
+ @"noOfFinishedUrls": [NSNumber numberWithInt: noOfFinishedUrls],
+ @"noOfSkippedUrls": [NSNumber numberWithInt: noOfSkippedUrls]
+ });
+ }];
}
RCT_EXPORT_METHOD(clearMemoryCache:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)