How to play a gif using ImageBackground in react-native?

Question

I have a GIF background image that I am rendering using react-native's ImageBackground component. The only issue is that the gif is not running, it becomes static.

When I use the Image component everything works fine, but I need to use the ImageBackground component

    <ImageBackground
       source= {require('../../assets/img/initial_wallpaper.gif')} 
       style={{flex:1}} >                

    </ImageBackground>

Using the code above the GIF renders statically. When I use the online expo util to test this it works fine there with the exact same code. But when I implement this in my react-native code base it does not work. Any insight will be greatly appreciated. Thank you :)

if your gif is not animating, there might be a problem with the gif. — Paul Nikonowicz, Aug 11 '19 at 19:57
Possible duplicate of [How do I display an animated gif in React Native?](https://stackoverflow.com/questions/35594783/how-do-i-display-an-animated-gif-in-react-native) — Shahzad, Oct 10 '19 at 06:02

score 2 · Accepted Answer · answered Aug 12 '19 at 04:32

I found this question on the same topic. From that, I'd guess you're running on Android? The following should help you resolve your problem:

Edit your android/app/build.gradle file and add the following code:

dependencies: { 

    ...

    compile 'com.facebook.fresco:fresco:1.+'

    // For animated GIF support
    compile 'com.facebook.fresco:animated-gif:1.+'

    // For WebP support, including animated WebP
    compile 'com.facebook.fresco:animated-webp:1.+'
    compile 'com.facebook.fresco:webpsupport:1.+' 
}

then you need to bundle the app again, You can display the gif images in two ways like this.

1-> <Image 
        source={require('./../images/load.gif')}  
        style={{width: 100, height: 100 }}
    />

2-> <Image 
        source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}  
        style={{width: 100, height:100 }} 
    />

Okay, apparently the dependencies I used caused the issue. Weird I followed the same thing you are showing me here from react native site. Except I am using ImageBackground. Thank you. — Hrutvik Patel, Aug 13 '19 at 00:15

score 1 · Answer 2 · answered Aug 12 '19 at 03:01

GIF and WebP support on Android

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.10.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:1.12.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:1.10.0'
  implementation 'com.facebook.fresco:webpsupport:1.10.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:1.10.0'
}

score 1 · Answer 3 · answered Oct 10 '19 at 06:01

1

for others like me looking for the solution in RN Version 0.60 try adding below inside app build.gradle file

implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of

implementation 'com.facebook.fresco:animated-gif:2.0.0'   //use

answered Oct 10 '19 at 06:01

Shahzad

1,315
2
22
42

How to play a gif using ImageBackground in react-native?

3 Answers3

Linked