Preload images

[avet-m]

Hi!

FastImage.preload works fine on IOS, but doesn't work on Android. I have tried on Pixel 2 XL (Android 10) and Redme 4X (Android 6.0.1).

react-native-fast-image - "^8.1.5" react-native - "0.61.2"

@DylanVann maybe I missed some additional steps for running it on Android?

[vitto-moz]

"react-native": "0.60.5", "react-native-fast-image": "^8.1.5"

I use FastImage.preload([{ uri: 'https://xxxxxxx./1.png' }, { uri: 'https://xxxxxxx./1.png' }]) but the images are loading not ahead of time

I expect they appear immediately, but they are loading (like they are not preloaded)

<FastImage
            style={[styles.defaultIcon, iconStyle]}
            source={{
              uri: imageUri, // 'https://xxxxxxx./1.png'
              priority: FastImage.priority.high,
            }}
            resizeMode={FastImage.resizeMode.contain}
            onLoad={this.onLoad}
          /> 

Please, tell me what I am doing wrong?

[avet-m]

@vitto-moz yes, preload method is not Promise, you can see it in the interface

interface FastImageStaticProperties {
    resizeMode: typeof resizeMode;
    priority: typeof priority;
    cacheControl: typeof cacheControl;
    preload: (sources: Source[]) => void;
}

As option you can try to simulate some delay before rendering the images, but it's tricky, you never know when all images will be loaded

[vitto-moz]

there is my case: I have the app screen, not the main one (1), which appears right after the app started, but those (2) I should switch to from the main one (1). as a part of the initialization I use FastImage.preload([{ uri: 'https://xxxxxxx./1.png' }, { uri: 'https://xxxxxxx./1.png' }]) then after a 1 minute, I'm switching to the screen, where I use these images (guess the minute should be enough). But the images behave like they loading the first time.

[avet-m]

@vitto-moz Is it the same behaviour on IOS and Android ?

[vitto-moz]

@avet-m we have an android only app, I will try to make the ios build and let you know

[rdjuric]

Same here.

I'm using Image.getSize() to preload/cache images for now.

[ibnubtpn]

any updates on it? it works perfectly on iOS but it's like no any preload effect for Android. I still see the image is loading (flickering)

[matthiasn]

Same issue for me, did anyone solve this problem? Thanks

[staghouse]

Same here.

I'm using Image.getSize() to preload/cache images for now.

Doesn't seem to work on iOS as using the only-if-cached option does not show the image and the the queryCache results are still empty. This, in general, seems to be an ongoing issue with Image from react-native proper itself.

[zoorabbit]

It works for me.

import FastImage from 'react-native-fast-image'
import {createImageProgress} from 'react-native-image-progress'
import Progress from 'react-native-progress/Bar'

const Image = createImageProgress(FastImage);

<Image 
  source={{ uri: 'http://loremflickr.com/640/480/dog' }} 
  indicator={Progress.Pie}
  indicatorProps={{
    size: 80,
    borderWidth: 0,
    color: 'rgba(150, 150, 150, 1)',
    unfilledColor: 'rgba(200, 200, 200, 0.2)'
  }}
  style={{
    width: 320,
    height: 240,
  }}
 renderError={() => {
    return <PreloadView />
  }}/>

[axeljeremy7]

any updates?

[gu00mello]

Any updates?

[Navipro70]

Any updates?

[vasylnahuliak]

Still reproduce on react-native 0.65.1 and react-native-fast-image v8.5.11

Any news on android?

A related issue with the fix in 2018 https://github.com/DylanVann/react-native-fast-image/issues/121#issuecomment-361808157

[ScreamZ]

Damn need it :'(

[teals-teamdeals]

Maybe a bit late, but in the meantime it's running on Android and IOS, The only problem I have with FastImage Preload is that there is a limit to the preloads. I have to display the product images of a market and preload does not manage to cash all images.

[ScreamZ]

I switched to expo-images

[Lakston]

any news on this ?

[giantslogik]

This improved Android preload for me. Based on https://github.com/bumptech/glide/issues/543

react-native-fast-image+8.6.3.patch