react-native-fast-image: Image not show on android, but still working on IOS

Hi dear @byeokim, what should I add to the header?

<FastImage
  source={{
    uri: 'https://picsum.photos/536/354',
    headers: {
      key: 'value', // <== what should I add here?
    },
  }}
/>

Regarding my comments above I meant

<FastImage
  source={{
    uri: ...,
  }}
  fallback={Platform.OS === 'android'}
/>

It doesn’t work with v7.0.0 for me.

Glide fails, here is the log from my phone:

2020-09-02 21:22:26.679 16922-16922/com.blogl10n W/Glide: Load failed for https://via.placeholder.com/150/810b14 with size [600x600]
    class com.bumptech.glide.load.engine.GlideException: Failed to load resource
    There was 1 cause:
    com.bumptech.glide.load.HttpException(Gone)
     call GlideException#logRootCauses(String) for more detail
      Cause (1 of 1): class com.bumptech.glide.load.engine.GlideException: Fetching data failed, class java.io.InputStream, REMOTE
    There was 1 cause:
    com.bumptech.glide.load.HttpException(Gone)
     call GlideException#logRootCauses(String) for more detail
        Cause (1 of 1): class com.bumptech.glide.load.HttpException: Gone
2020-09-02 21:22:26.680 16922-16922/com.blogl10n I/Glide: Root cause (1 of 1)
    com.bumptech.glide.load.HttpException: Gone
        at com.bumptech.glide.integration.okhttp3.OkHttpStreamFetcher.onResponse(OkHttpStreamFetcher.java:73)
        at okhttp3.RealCall$AsyncCall.execute(RealCall.java:206)
        at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
        at java.lang.Thread.run(Thread.java:919)
2020-09-02 21:22:26.693 16922-16922/com.blogl10n W/Glide: Load failed for https://via.placeholder.com/150/810b14 with size [-2147483648x-2147483648]
    class com.bumptech.glide.load.engine.GlideException: Failed to load resource
    There was 1 cause:
    com.bumptech.glide.load.HttpException(Gone)
     call GlideException#logRootCauses(String) for more detail
      Cause (1 of 1): class com.bumptech.glide.load.engine.GlideException: Fetching data failed, class java.io.InputStream, REMOTE
    There was 1 cause:
    com.bumptech.glide.load.HttpException(Gone)
     call GlideException#logRootCauses(String) for more detail
        Cause (1 of 1): class com.bumptech.glide.load.HttpException: Gone
2020-09-02 21:22:26.695 16922-16922/com.blogl10n I/Glide: Root cause (1 of 1)
    com.bumptech.glide.load.HttpException: Gone
        at com.bumptech.glide.integration.okhttp3.OkHttpStreamFetcher.onResponse(OkHttpStreamFetcher.java:73)
        at okhttp3.RealCall$AsyncCall.execute(RealCall.java:206)
        at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
        at java.lang.Thread.run(Thread.java:919)

This is the code to reproduce

<FastImage
    style={{width: 200, height: 200}}
    source={{uri: 'https://via.placeholder.com/150/810b14'}}
    onError={(e) => { console.log('e', e); }}
    resizeMode={FastImage.resizeMode.contain}
/>

In my case, this problem is caused by not sending cookies to the server. I’m using axios(which uses XMLHttpRequest internally) to request session, and I solved this problem by simply installing rn-fetch-blob, which includes polyfills of XMLHttpRequest.

Maybe we could add rn-fetch-blob as a dependency/peerDependency of this library.

Can this be a problem specifically related to images from placeholder.com? We are facing the same issue, this url https://via.placeholder.com/300/09f/fff.png works in the browser and on iOS but does not display the image on Android. When <FastImage /> is swapped with RN <Image /> on Android, the same url works fine as well.

Try Commenting cache if you are using this works for me!

cache:FastImage.cacheControl.cacheOnly

In my case, if the FastImage view is being resized while an image is loading, then it will cause the image to fail to load without triggering any callbacks, including any other FastImage views on the same screen. Can workaround these cases by enabling fallback which will use react-native Image instead.

Environment:
react-native-fast-image: 8.6.3
Nexus 7 and Nexus 10 API 29 Emulator

I am having this issue on Android 10, with RNFI version of 8.3.4.

I have just experienced this too. I have just upgraded to version 8.2.0. There is no problem on iOS, only not show on Android. It also triggers onError but I haven’t checked yet whether there is a message.

Note that before I upgraded to 8.2.0 I was at 7.0.2 and there was the exact same issue (image doesn’t show on Android).

@dragonlong206 I haven’t resolved yet. I am currently using fallback prop as @mdoesburg suggests while digging into solution.

Happens when upgrading package from 8.2.0 to 8.2.1+. Must be related to this bug fix. I am using local images and I experience the images disappearing on Android.

Current workaround is to lock version to 8.2.0.

It might be worth noting that I do use the fallback prop which is what the bug fix is related to:

fallback={ANDROID || resizeMode === 'repeat'}

The bug fix description:

iOS image has its own properties for cache and if fallback is true and regular image is being rendered we can’t set FastImage’s cache value because it doesn’t match.

@DylanVann Maybe the fix would be to check if the OS is actually iOS, since I only use fallback for Android, and this bug fix is specifically only targeting iOS?

Any helps? I still stuck at this