Animated AVIF not playing

[siddhatiwari]

Describe the bug
Animated AVIFs with transparency are not playing and display incorrectly.

To Reproduce
Steps to reproduce the behavior if possible, or a link to a reproduction repo:
Set a transparent AVIF as the source of a FastImage element

  <FastImage
    style={{ height: "100%", width: "100%" }}
    source={require("@/assets/animated_transparent.avif")}
    resizeMode="cover"
  />

Expected behavior
The AVIF should display correctly with animations and transparency.

Screenshots

Dependency versions

• React Native version: 0.74.2
• React version: 18.2.0
• React Native Fast Image version: 8.8.1

[github-actions]

👋 Welcome to the community!
Thank you for opening your first issue. We appreciate your contribution and will review it as soon as possible.
Feel free to ask questions, share ideas, or provide any additional details! We're here to help. 😄

[princektripathi]

Describe the bug Animated AVIFs with transparency are not playing and display incorrectly.

To Reproduce Steps to reproduce the behavior if possible, or a link to a reproduction repo: Set a transparent AVIF as the source of a FastImage element

  <FastImage
    style={{ height: "100%", width: "100%" }}
    source={require("@/assets/animated_transparent.avif")}
    resizeMode="cover"
  />

Expected behavior The AVIF should display correctly with animations and transparency.

Screenshots

Dependency versions

• React Native version: 0.74.2
• React version: 18.2.0
• React Native Fast Image version: 8.8.1

@siddhatiwari, we will debug this and get back to you.

[princektripathi]

@siddhatiwari, can you please attach a repro with an animated AVIF image with transparent background?

[princektripathi]

@siddhatiwari, we’ve added support for animated AVIF on iOS! 🎉

Unfortunately, you’ll need to wait for Android support. Glide doesn’t support animated AVIF out of the box, so we’ll need to implement custom support for it.

Thanks for your patience! 🚀