Image prefetch does not work on iOS

rossjohnsonMP commented 4 years ago

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Using image prefetch does not work at all on iOS.
Preloading the images and then checking Image.queryCache shows an empty query cache
Attempting to display images that have been prefetched using cache: 'only-if-cached' will result in no image shown
Works absolutely fine on Android
There are a number of other issues reporting the same thing in the past this one and another
https://www.npmjs.com/package/react-native-fast-image provides the same behaviour so perhaps this isn't getting much traction but I'm keen to not add on libraries for something that is supposed to be supported

React Native version:

System: OS: macOS 10.15.3 CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz Memory: 289.63 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.16.3 - /usr/local/opt/node@10/bin/node Yarn: 1.15.2 - ~/.yarn/bin/yarn npm: 6.9.0 - /usr/local/opt/node@10/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: API Levels: 28 Build Tools: 28.0.3 System Images: android-29 | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 3.3 AI-182.5107.16.33.5199772 Xcode: 11.3/11C29 - /usr/bin/xcodebuild Languages: Java: 1.8.0_192 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.1 => 0.62.1 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

Preload an image using Image.prefetch(img)
display the image using only-if-cached

OR

Preload an image using Image.prefetch(img)
display the image

Expected Results

Scenario 1

Image is shown

Scenario 1

Image is instantly shown

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/yseyl0_9N

darcoola commented 4 years ago

I have the same problem using simulators. It works for Android but not for iOS.

martin-888 commented 4 years ago

Just confirming same problem on iOS.

CDBridger commented 4 years ago

I am seeing the same, can anyone recommend an alternative library which supports prefetching in the meantime (which is not dead)?

rossjohnsonMP commented 4 years ago

I am seeing the same, can anyone recommend an alternative library which supports prefetching in the meantime (which is not dead)?

@CDBridger I found that react-native-fast-image is broken in the opposite way and seems like its dying so not the best alternative

giaset commented 3 years ago

Having the exact same issue on iOS. Prefetching all my images but getting an empty cache when I call Image.queryCache

Obviously, this causes only-if-cached to not work either

nhohb commented 3 years ago

Same issue on iOS when offline mode

JackClown commented 3 years ago

same problem react-native: 0.59.10

Twinski commented 3 years ago

Can confirm this on RN 0.61.4! Interesting discovery: the Image.queryCache does show images which are smaller in size..

Measured behavior: Loading large images (eg. Unsplash wallpapers ~1.3MB): no file stored in the fsCachedData folder Loading normal size images (~200KB): file stored in fsCachedData & appears in Image.queryCache

punjasin commented 3 years ago

same here it take sometimes for image to load up even queryCache show that image are already cache

Twinski commented 3 years ago

If I can help anyone / any team: we use our own caching mechanism using react-native-fs and it's been great so far. It's max 1 day of work and it's worth it. More control overall. 👍

vjsingh commented 3 years ago

+1

staghouse commented 3 years ago

+1

theianjohnson commented 3 years ago

@Twinski is your custom caching mechanism something you could share? I'm having the same issue and always like to avoid reinventing the wheel if I can

mohity777 commented 3 years ago

any solutions? i get this error - Error: The request timed out. at Object.fn [as prefetchImage] (NativeModules.js:99) at Object.prefetch (Image.ios.js:64) at _callee$ (VM37 NominationTab.bundle:115) at tryCatch (runtime.js:63) at Generator.invoke [as _invoke] (runtime.js:293) at Generator.next (runtime.js:118) at tryCatch (runtime.js:63) at invoke (runtime.js:154) at runtime.js:189 at tryCallTwo (core.js:45)

61people commented 3 years ago

I found the cause of this issue.

prefetch method will call imageLoader's loadImageWithURLRequest method.
This method will set size to CGSizeZero and scale to 1 by default.
Image cache will use url string, size and scale to create a key for storage.

When you set Image's source, size is image's size, scale is screen's scale. So it will never hit the cache.


RCT_EXPORT_METHOD(prefetchImage:(NSURLRequest *)request
              resolve:(RCTPromiseResolveBlock)resolve
              reject:(RCTPromiseRejectBlock)reject)
{
if (!request) {
reject(@"E_INVALID_URI", @"Cannot prefetch an image for an empty URI", nil);
return;
}
id<RCTImageLoaderProtocol> imageLoader = (id<RCTImageLoaderProtocol>)[self.bridge
                                                                      moduleForName:@"ImageLoader" lazilyLoadIfNecessary:YES];
[imageLoader loadImageWithURLRequest:request
                            priority:RCTImageLoaderPriorityPrefetch
                            callback:^(NSError *error, UIImage *image) {
    if (error) {
        reject(@"E_PREFETCH_FAILURE", nil, error);
        return;
    }
    resolve(@YES);
}];
}

(nullable RCTImageLoaderCancellationBlock)loadImageWithURLRequest:(NSURLRequest *)imageURLRequest priority:(RCTImageLoaderPriority)priority callback:(RCTImageLoaderCompletionBlock)callback { return [self loadImageWithURLRequest:imageURLRequest size:CGSizeZero scale:1 clipped:YES resizeMode:RCTResizeModeStretch priority:priority progressBlock:nil partialLoadBlock:nil completionBlock:callback]; }

staghouse commented 2 years ago

Any movement on this? I'm using Expo and most, if not all of the other options require a bare project to work.

caicheng commented 2 years ago

It's 2021, still issue here

vasylnahuliak commented 2 years ago

Any movement on this? I'm using Expo and most, if not all of the other options require a bare project to work.

You can use react-native-fast-image into Expo using EAS Build (SDK 42).

https://expo.canny.io/feature-requests/p/react-native-fast-image

glesperance commented 1 year ago

React native fast image isn't really a solution as it is not actively maintained.

see https://github.com/DylanVann/react-native-fast-image/issues/907

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

vasylnahuliak commented 1 year ago

Any movement on this? I'm using Expo and most, if not all of the other options require a bare project to work.

2023 https://docs.expo.dev/versions/unversioned/sdk/image/

aliraza-noon commented 8 months ago

@61people you have context on this can you please raise PR to fix this ?

github-actions[bot] commented 2 months ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

rossjohnsonMP commented 2 months ago

Still exists

itsjustjo96 commented 1 month ago

I'm still experiencing this issue on a physical iOS device running bare react native. :(

joaoguilhermee commented 1 month ago

+1

kevmuri commented 2 weeks ago

It's been a few years now, any solutions?

facebook / react-native