CODEWITHSUNDEEP
javascriptreactjsimagereact-native
Hrutvik Patel
Hrutvik Patel

Reputation: 621

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

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 :)

Upvotes: 0

Views: 5265

Answers (3)

Shahzad
Shahzad

Reputation: 1415

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

Upvotes: 1

Khush Jammu
Khush Jammu

Reputation: 51

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 }} 
    />

Upvotes: 2

hong developer
hong developer

Reputation: 13926

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'
}

Upvotes: 1

Related Questions