Images don't load on IOS at all

[Yuniac]

Hi, I installed this package yesterday on RN Version 0.72.1, and on IOS no images load whatsoever, the animation components work and shows up, then it disappears and the real image doesn't appear at all. Any ideas? What kind of info can I provide to better report this issue?

Usage example:

 <CachedImage
            source={'http://192.168.1.35:3310/post/img/bad3e93cfa291f0fec42b87439276094'}
            loadingImageStyle={{
              transform: [{ scale: 0.1 }],
              borderRadius: 999 ,
              overflow: round ? 'hidden' : 'visible',
            }}
            thumbnailSource={source?.uri}
            style={[
              {
                width: 50,
                height: 50,
                borderRadius: 999,
              },
              style,
            ]}
            resizeMode={resizeMode}
            loadingImageComponent={() => (
              <LoadingComponent
                top={top}
                isDownloaded={isDownloaded}
                round={round}
                width={calcedWidth}
                height={calcedHeight}
                style={style}
                shimmerStyle={shimmerStyle}
              />
            )}
          />

Config file:

CacheManager.config = {
  baseDir: `${Dirs[Platform.OS === 'ios' ? 'LibraryDir' : 'CacheDir']}/images_cache/`,
  blurRadius: 55,
  cacheLimit: 0,
  sourceAnimationDuration: 1,
};

Info:

• RN 0.72.1
• Lib version ^2.5.0
• Tested on a real iPhone (not an emulator) IOS version 15.7. iPhone 7 plus

On Android, the library works albeit there's like a second or two delays between the loader disappearing and the real image showing up which I couldn't resolve either, I suspect it's the config file. on IOS however no image appears, only the loader then nothing

[efstathiosntonas]

Hi @Yuniac, reduce blur to 15 and border radius to 50, there’s no need to set so high values.

scale:0.1 will reduce the size to 2px, increase that too.

[Yuniac]

Hi @Yuniac, reduce blur to 15 and border radius to 50, there’s no need to set so high values.

scale:0.1 will reduce the size to 2px, increase that too.

Hey, thanks for taking the time to reply to me. Those styles were the result of my trying many things to see why the images won't appear. I took your advice and reduced my code to this:

  <View style={{ borderWidth: 2, borderColor: 'cyan', flex: 1 }}>
      <Text style={{ color: 'white', textAlign: 'center' }}>Image below</Text>
      <CachedImage
        source={'https://images.pexels.com/photos/312824/pexels-photo-312824.jpeg'}
        style={[{ width: 75, height: 75, flex: 1 }]}
      />
    </View>

Config:

CacheManager.config = {
  baseDir: `${Dirs[Platform.OS === 'ios' ? 'LibraryDir' : 'CacheDir']}/images_cache/`,
  blurRadius: 15,
  cacheLimit: 0,
};

Unfortunately, it still didn't work. Also considering the old code worked on Android, more or less, I suspect the issue is in how I installed the package or something...

Result on IOS:

[efstathiosntonas]

Can you use CacheDir on ios instead of LibraryDir?

[Yuniac]

Can you use CacheDir on ios instead of LibraryDir?

Yeah, it was initially like this for both platforms baseDir: ${Dirs.CacheDir}/images_cache/ then I changed it to LibraryDir because it's an IOS-only dir (says the docs of the file system management library), hoping that would solve it somehow but to no avail

[efstathiosntonas]

@Yuniac do you have a repro repository so we can look into it?