bug: Sometimes, GIF images do not animate on Android. On iOS, GIF images load a little slowly.

[nthanhha]

What's happening?

Sometimes, GIF images do not animate on Android. On iOS, GIF images load a little slowly.

Reproduceable Code

None

Relevant log output

None

Device

Android Devices

TurboImage Version

1.20.0

Can you reproduce this issue in the TurboImage Example app?

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

[duguyihou]

hey @ng-ha

• I tested multiple times in Android. Gif image always plays. That would be fantastic if you can provide the reproduce steps.
• Re iOS, how do you define loading slowly? compared with Android?

gif_android.mp4

[nthanhha]

Sorry for the delayed reply! @duguyihou
Here are the details:

1. GIF images do not animate on Android when prefetching images in parallel while fetching them directly.

const GifScreen = () => {
  useEffect(() => {
    TurboImage.prefetch(gifData);
  });
  return (
    <FlatList
      data={gifData}
      renderItem={({ item }) => (
        <TurboImage
          style={styles.image}
          source={{ uri: item.uri }}
          indicator={{ style: 'large' }}
          format="gif"
        />
      )}
      keyExtractor={(item) => item.uri}
    />
  );
};

Screen.Recording.2024-12-02.at.13.16.42.mov

2. On iOS, some GIFs load a little slowly:
   The image url is https://cdn.vtf.active-app.jp/fd9de6b6-7be9-4469-abbd-c88544c25a78/btn_gif_gao_20180323.gif

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-12-02.at.13.57.40.mp4

[duguyihou]

Re Android, I can reproduce it. Will look into it.

Re iOS, I can see it does not take much time to load the gif image, see the screenshots.


This is the Charles log. gif_ios.chlz.zip

It is quite wired to me as well. Then I found Improve how Gifu uses system resources. The issue was raised by the author of Nuke. My guess is your gif image has more details so it take more system resources. Unfortunately, I don't have much knowledge about gif. I will do more investigation later.

[nthanhha]

Thank you! When I replace the TurboImage component with the React Native Image component, the GIF loads pretty quickly on iOS with no delay. So, I think the issue isn't with the GIF, as its size is quite small, if that helps

[duguyihou]

hey @ng-ha

I am not saying the gif size. Maybe it is the way Gifu render gif image. From the video, you can see the gif data is fetched by Nuke quickly and sent to GIFImageView. Then it takes around 2 seconds for Gifu to decode the image.

slow_gif.mov

Besides, I also tried another url (https://i.gifer.com/GDpJ.gif). I did not see any delay. Does it always happen for all your gif urls?

Simulator.Screen.Recording.-.iPhone.16.-.2024-12-03.at.17.50.58.mp4

[nthanhha]

Hi @duguyihou! No, it doesn't always happen for all my gif urls. I have other GIFs that loads fast:
https://cdn.vtf.active-app.jp/fd9de6b6-7be9-4469-abbd-c88544c25a78/btn_yamanba_202407051644.gif
https://cdn.vtf.active-app.jp/fd9de6b6-7be9-4469-abbd-c88544c25a78/bg_btn_large_level_black_202004100934.gif

[duguyihou]

@ng-ha Okay, it may be Gifu's issue. I will see what I can do. Otherwise, need to find another one to replace it.

[duguyihou]

@ng-ha
Re Android, did you encounter gif image not animate issue without prefetch?

[nthanhha]

@duguyihou The GIFs work fine without prefetching. So technically, it's not critical issue. I can avoid this issue by carefully checking and prefetching. I just wanted to raise the issue as a suggestion for improving the package.

[github-actions]

This issue is stale because it has been open 15 days with no activity. Remove stale label or comment or this will be closed in 5 days.