How do I display an animated gif in React Native?

by

For RN < 0.60

By default the Gif images are not supported in android react native app.
You need to set use Fresco to display the gif images.
The code:

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

For RN >= 0.60

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

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

I hope it is helpful to others,

More Related Contents:

  1. Module AppRegistry is not registered callable module (calling runApplication)
  2. How to build .ipa application for react-native-ios? [closed]
  3. React Native: Possible unhandled promise rejection
  4. React-native fetch() from https server with self-signed certificate
  5. React-Navigation with Login Screen
  6. react-native-fbsdk error: No resource found that matches the given name: attr ‘android:keyboardNavigationCluster’
  7. Want to share multiple images with separate caption to each image Whatsapp, react native share
  8. React Native Error: ENOSPC: System limit for number of file watchers reached
  9. How to navigate between different nested stacks in react navigation
  10. Unable to resolve module ‘AccessibilityInfo’, when trying to create release bundle
  11. componentWillMount is deprecated and will be removed in the next major version 0.54.0 in React Native
  12. ES6, how can you export an imported module in a single line?
  13. FlatList inside ScrollView doesn’t scroll
  14. How to make Metro (React Native packager) ignore certain directories
  15. Renaming a React Native project?
  16. Invariant Violation: requireNativeComponent: “RNSScreen” was not found in the UIManager
  17. React-native: How to control what keyboard pushes up
  18. KeyboardAvoidingView not Working Properly
  19. React-Native, Scroll View Not Scrolling
  20. Unable to resolve module `@babel/runtime/helpers/interopRequireDefault`
  21. React Native Android Build Error MainActivity.java:29: error: cannot find symbol
  22. Auto scale image height with React Native
  23. Detect ScrollView has reached the end
  24. Facing issue ” Failed to install the app. Make sure you have the Android development environment ” in react native
  25. Network Response Time Out Error (create-react-native-app) (expo)
  26. How to download a file with React Native?
  27. How to set default font family in React Native?
  28. What is react-native link?
  29. React Native – Difference between onChange vs onChangeText of TextInput
  30. fetch response.json() gives responseData = undefined

Leave a Comment