bug: Turbo Image not Caching Firebase Storage Image

hamzasaleem2397 commented 3 weeks ago

What's happening?

React Native Turbo Image is not caching Firebase Storage Image when I kill the app the image reload again and it is working perfectly on the other image source like wall haven and some random images from the google. 0a52a13a-9066-4c87-9ca2-10827ad520cf Top 2 images aren't caching they are loading again and again when I turned off the internet it won't load at all until I kill the app with wifi to be turned on

Reproduceable Code

import {SafeAreaView, Text} from 'react-native';
import TurboImage from 'react-native-turbo-image';
function App(): React.JSX.Element {
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
      <Text style={{fontSize: 20}}>
        Default React Native Turbo Image Github
      </Text>
      <TurboImage
        resizeMode="cover"
        source={{
          uri: 'https://github.com/duguyihou/react-native-turbo-image/assets/9347790/7955aa00-0b53-44d1-88bd-9b5e320db21e',
        }}
        style={{width: 100, height: 100}}
      />
      <Text style={{fontSize: 20}}>Firebase Image with is not caching</Text>
      <TurboImage
        resizeMode="cover"
        source={{
          uri: 'https://firebasestorage.googleapis.com/v0/b/fitso-app.appspot.com/o/Product%2FEnwflneArUSkOAcbFSii1X3ZPzf2_1729582749600.jpg?alt=media&token=c9bab6e2-28d6-4da8-bdab-b86563978f05',
        }}
        style={{width: 100, height: 100}}
      />
      <Text style={{fontSize: 20}}>Random Image WAllhaven</Text>
      <TurboImage
        resizeMode="cover"
        source={{
          uri: 'https://w.wallhaven.cc/full/6d/wallhaven-6d8gy6.png',
        }}
        style={{width: 100, height: 100}}
      />
      <Text style={{fontSize: 20}}>Random Image letsenhance</Text>

      <TurboImage
        resizeMode="cover"
        source={{
          uri: 'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',
        }}
        style={{width: 100, height: 100}}
      />
      <Text style={{fontSize: 20}}>Random Image letsenhance</Text>

      <TurboImage
        resizeMode="cover"
        source={{
          uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-C_UAhXq9GfuGO452EEzfbKnh1viQB9EDBQ&s',
        }}
        style={{width: 100, height: 100}}
      />
    </SafeAreaView>
  );
}

export default App;

Relevant log output

I cannot find any relevant log

Device

iPhone 15 - IOS 17.5

TurboImage Version

^1.21.0

Can you reproduce this issue in the TurboImage Example app?

Yes, I can reproduce the same issue in the Example app

duguyihou commented 3 weeks ago

@hamzasaleem2397

I tested the first image. It works well on my side. From the Charles, I can see it only fetch image once. After I kill the app and reopen the page, no extra api call, which means the image is cached in disk. Can you provide a reproducer if you still encounter this issue?

https://github.com/user-attachments/assets/5b61b989-1e61-4964-ae8d-335ad353e1a5

TurboImage set urlCache to CachePloicy by default. The max-age in your Firebase Storage Image is 0, which means it won't be cached. That's why the last image have disk cache. Can you try dataCache? It will ignore cache-control

hamzasaleem2397 commented 3 weeks ago

Thank you for your time. You are correct—I checked the GitHub URL on Charles, and there is no extra API call. After trying different cache policies, the Firebase image now seems to work fine. However, when I close the app and turn off Wi-Fi, the image does not display, so there may be an issue with fetching from the cache.

duguyihou commented 3 weeks ago

@hamzasaleem2397

I killed the app and turned off the wi-fi, the image shows. Can you provide a reproducer?
btw, the image size is quite large. It takes more time to load it.

https://github.com/user-attachments/assets/761095e2-7774-4861-9b3b-f06e8832cb0d

hamzasaleem2397 commented 3 weeks ago

@duguyihou

After using cache Policy firebase image is working as expected.
I was talking about this image https://github.com/duguyihou/react-native-turbo-image/assets/9347790/7955aa00-0b53-44d1-88bd-9b5e320db21e not showing when I kill the app.
I am aware about the size thanks you reminding.

and I have checked the cache Policy a month ago it wasn't working with firebase url now its seems to be working

duguyihou commented 3 weeks ago

@hamzasaleem2397

I see. Thanks for letting me know. It is the image url issue. I will update it later.

https://github.com/user-attachments/assets/8a254739-f733-4afe-bf03-0eaa9998ae70

duguyihou / react-native-turbo-image