Blur in iOS causing Blacked image but works properly in android.

[Gautham495]

The local images and some remote images are producing a black image when loading which i think is due to the blur effect getting failed to render which is causing UX problems. It was working in 1.12.0 version.

Please fix it in iOS.

  <TurboImage
          source={require('../../Icons/New/SomeIcon.png')}
          style={styles.someStyle}
          resizeMode="contain"
        />

Cannot show video as its work based app.

Is there any way to switch the blur off ?

[Gautham495]

@duguyihou

[Gautham495]

The flicker is very evident and its causing a huge UX problem when the image is loaded for the first time. How to switch it off?

[Gautham495]

It seems without providing a blurhash or a placeholder - the black image does occur - so now i have to change 100+ files to include a common blurhash --- Please add this in the docs! Please!

This is a working production app in playstore and I tested in testflight so it wont go live to folks using it as I am doing this in QA - Testing phase.

Thanks - But please provide a solution to this and close this issue.

[Gautham495]

Plus - is there a way to style the blurhash to have like a rounded borders? same for the thumbhash.

[duguyihou]

@Gautham495

• can you provide a reproducer?
• are you talking about blur or fadeDuration? you can turn fadeDuration off by setting it to 0.

I commented the placeholder in the example and did not see any strange behaviour.

      <TurboImage
        source={{
          uri: item.url,
        }}
        style={styles.card}
        // placeholder={{ blurhash: item.blurhash }}
        resize={size}
        cachePolicy="dataCache"
      />
    );

https://github.com/user-attachments/assets/1917c65b-747f-4869-8d00-f86a284a72fa

[Gautham495]

I dont use a placeholder at all just this snippet

<TurboImage source={require('../../Icons/New/SomeIcon.png')} style={styles.someStyle} resizeMode="contain" />

for all the images and i am getting a black flicker. Its in the latest version as well.

[Gautham495]

Here each image has a blurhash. In my case there is no blurhash which is leading to this black flicker.

[Gautham495]

What is the difference and performance difference between dataCache and urlCache. Please explain so i can try it out

[duguyihou]

@Gautham495 As I mentioned above, I did not use placeholder as well. I did not see black flicker.

      <TurboImage
        source={{
          uri: item.url,
        }}
        style={styles.card}
        // placeholder={{ blurhash: item.blurhash }}
        resize={size}
        cachePolicy="dataCache"
      />
    );

Then I tried it in your way. See the video. No black flicker.

      <TurboImage
        source={{
          uri: item.url,
        }}
        style={styles.card}
        // placeholder={{ blurhash: item.blurhash }}
        // resize={size}
        // cachePolicy="dataCache"
        resizeMode="contain"
      />

https://github.com/user-attachments/assets/8969eef5-8d3a-4a7e-9856-b790d375934c

[Gautham495]

https://github.com/user-attachments/assets/0c44a4e6-72c7-4287-b5c4-03b621382519

Here is the video of the working as well - You can see it is showing black placeholder when i change the image. Where i never applied any placeholder at all.

[Gautham495]

This is tested in real device as well.

[duguyihou]

@Gautham495 Can you show me the style applied to the image? If you set backgroundColor, both RN Image and TurboImage will have black flicker.

https://github.com/user-attachments/assets/b1be2070-c3b6-4a78-99a2-50b6719f07ed

https://github.com/user-attachments/assets/81412ddd-fa6d-43e5-b240-e8ccff1b90c2

[Gautham495]

Here - i applied no bg here.

 <TurboImage
                source={require('../../Icons/S/S.png')}
                style={{
                  width: 30,
                  height: 30,
                  marginLeft: 10,
                  marginTop: 5,
                }}
                resizeMode="contain"
              />

[Gautham495]

And it flickers with a black bg.

[duguyihou]

@Gautham495

Okay, can you provide a reproducer? It is hard to debug since it works well in the example.

[Gautham495]

Do not take any offense bro - you are doing a wonderful job, the library works too good and properly but this is the only edge case I found which is hampering the UX.

Open source folks like you are god send so do not worry / feel that I am critising. You are good at this.

[Gautham495]

@duguyihou I just fixed this by adding a

 <TurboImage
              cachePolicy="dataCache"
              placeholder={{
                blurhash: '',
              }}
              source={require('../../Icons/z/z')}
              style={styles.z}
              resizeMode="contain"
            />

And this does not produce the black bg.

[Gautham495]

But you should point this out in the docs please. Also do it for the animated and clearly explain difference between datacache and urlcache

[Gautham495]

And please make a social media presence so i can DM you regarding this library as this is going to production on monday and I do not want any surprising crashes on android and iOS.

[Gautham495]

You can also add it to the docs that we use your library as we load a lot of images and high performance is a must and your library can handle it.

[duguyihou]

@duguyihou I just fixed this by adding a

 <TurboImage
              cachePolicy="dataCache"
              placeholder={{
                blurhash: '',
              }}
              source={require('../../Icons/z/z')}
              style={styles.z}
              resizeMode="contain"
            />

And this does not produce the black bg.

It does not make sense to me. If you pass an invalided blurhash string, it will be ignored. Is that possible that share me the image's url and part of your code?

[Gautham495]

I used the dog images from your image set only as you can see here - first half is without blurhash and second half is with empty blurhash and it works. Tested in iphone XR - iOS 18.3

https://github.com/user-attachments/assets/d8e66ed5-a45c-432c-ada6-46eb315ec663

[duguyihou]

But you should point this out in the docs please. Also do it for the animated and clearly explain difference between datacache and urlcache

• I will add this to the README if it is a bug and cannot be fixed.
• Re animated, it is not a hard work to mention. just follow the docs to implement it.
• Re dataCache and urlCahce,
  • dataCache: it will stay in disk forever as long as it does not reach the threshold
  • urlCache: it will respect the max-age in the response. docs[https://kean-docs.github.io/nuke/documentation/nuke/cache-layers#HTTP-Disk-Cache]

[duguyihou]

And please make a social media presence so i can DM you regarding this library as this is going to production on monday and I do not want any surprising crashes on android and iOS.

Sorry. I used Twitter before, but I removed all the accounts last year.

[duguyihou]

I used the dog images from your image set only as you can see here - first half is without blurhash and second half is with empty blurhash and it works. Tested in iphone XR - iOS 18.3

ScreenRecording_08-22-2024.16-33-11_1.MP4

what is the behaviour in iOS 17? I don't have iOS 18 device.

[Gautham495]

You have to have some social presence like atleast Linkedin.

[Gautham495]

In ios 17.5 its the same flicker issue and thats my real daily use phone and I tested it in production with Testflight build.

[duguyihou]

In ios 17.5 its the same flicker issue and thats my real daily use phone and I tested it in production with Testflight build.

Can you modify the code in the example and reproduce it?

[Gautham495]

But you should point this out in the docs please. Also do it for the animated and clearly explain difference between datacache and urlcache

• I will add this to the README if it is a bug and cannot be fixed.
• Re animated, it is not a hard work to mention. just follow the docs to implement it.

• Re dataCache and urlCahce,

  • dataCache: it will stay in disk forever as long as it does not reach the threshold
  • urlCache: it will respect the max-age in the response. docs[https://kean-docs.github.io/nuke/documentation/nuke/cache-layers#HTTP-Disk-Cache]

You will have to add this fix in the documentation for sure as i included it in around 180+ components in my app and think how weird it looked when the black bg was flickering lol. In android it works flawlessly.

[Gautham495]

In ios 17.5 its the same flicker issue and thats my real daily use phone and I tested it in production with Testflight build.

Can you modify the code in the example and reproduce it?

I used from your example code only.

[duguyihou]

In ios 17.5 its the same flicker issue and thats my real daily use phone and I tested it in production with Testflight build.

Can you modify the code in the example and reproduce it?

I used from your example code only.

But it does not have black flicker on my side. If black flicker is introduced by turboImage, it may trouble others as well. I think it is better to reproduce it and fix it if I can.

[Gautham495]

So I think we have to ask other developers for the same and its mostly due to the native package issue rather than the library issue.

[duguyihou]

@Gautham495

Do you mind installing other versions and test it since you can reproduce it? You mentioned it works well in v1.12.0.

• v1.12.1
• v1.12.2
• v1.13.0
• v1.14.0 (this one is not necessary as you are using it)

[Gautham495]

Its fixed with the empty blurhash so its fixed for me now.

[duguyihou]

Its fixed with the empty blurhash so its fixed for me now.

Sure, no problem. I will take a look if other people can reproduce it.

[Gautham495]

Thank you for your hard work in maintaining this library. Its a superb replacement to fast-image and I think this library will be a go to standard for years to come for bare react native projects.

[Gautham495]

Local Images are flickering when state updates in android only in production build. Can you check this out. But others work fine.

[Gautham495]

I am using datacache for local images as well is it a problem?

[duguyihou]

Local Images are flickering when state updates in android only in production build. Can you check this out. But others work fine.

Can you let me know what state updates? I realised an issue this week which happens when props changes for both iOS and Android. But your issue is only for Android. I am not sure if we are talking about the same one.

[duguyihou]

I am using datacache for local images as well is it a problem?

cachePolicy is only for remote urls. local images are already in the disk.

[Gautham495]

Yeah in android - if the state changes and the blurhash is provided - the image flickers showing the blurhash. This produces a bad UX to the app.

[duguyihou]

Closing it as I cannot reproduce it. Feel free to reopen it if you provide a reproducer.