The .GIF image also known as Graphics Interchange Format Image supported multiple animations. So in this tutorial we would going to create a react native app that Show Live GIF Animated Image Inside Image component in both Android iOS Applications. But there is a hidden thing like iOS app react native iOS app directly not support the .GIF format. We need to install the facebook.fresco library in our react native project. So read the below tutorial and Happy Reading 🙂 .
Note : You need to only configure your android project so read the Step :1 from below because by default react native android app dose not support GIF images. But there is no need to to configure anything in iOS application.
Contents in this project Show Live GIF Animated Image Inside React Native Android iOS App :
1. Open YourReactNativeProjectFolder -> android -> app -> build.gradle file. Now add below dependencies inside the dependencies block. This is React Native’s official libraries and you can learn more about them here on its official page under GIF and Web support on Android topic.
|
1 2 3 4 5 6 7 8 9 10 11 |
compile 'com.facebook.fresco:animated-base-support:1.3.0' // For animated GIF support compile 'com.facebook.fresco:animated-gif:1.3.0' // For WebP support, including animated WebP compile 'com.facebook.fresco:animated-webp:1.3.0' compile 'com.facebook.fresco:webpsupport:1.3.0' // For WebP support, without animations compile 'com.facebook.fresco:webpsupport:1.3.0' |
2. Now you need to re-run the complete project using react-native run-android command. On running time you can see that all the above libraries would be downloaded in your project automatically from internet.
3. Import StyleSheet, Text, View and Image component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; |
4. Create a Root View in render’s return block.
|
1 2 3 4 5 6 7 8 9 |
render() { return ( <View style={styles.container}> </View> ); } |
5. Create Image component in root view. Now we would call the GIF image from our online server using URL. If you want to Show GIF image from local resource then read my this tutorial.
|
1 2 3 4 5 6 7 8 9 10 |
render() { return ( <View style={styles.container}> <Image source={{uri : 'https://reactnativecode.com/wp-content/uploads/2017/11/happy_mothersDay.gif'}} style = {{width: 315, height: 383}} /> </View> ); } |
6. Create Style for View component.
|
1 2 3 4 5 6 7 |
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
7. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; export default class App extends Component<{}> { render() { return ( <View style={styles.container}> <Image source={{uri : 'https://reactnativecode.com/wp-content/uploads/2017/11/happy_mothersDay.gif'}} style = {{width: 315, height: 383}} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
Screenshot in Android device:
Screenshot in iOS device :
Nice one! Please tell me how do we render svg images in react native
Rohit currently React Native dose not support the SVG image but you can add the SVG image in react native app using custom NPM library.
Thanks, its helpful
Welcome Asanka 🙂 .
As I see the URL, It has some hearts which is not being shown in the app when we use this. May I know how to import?
Abhishek please explain your question more briefly ?
not working
Akash try to follow all my steps, it will surely work .
Not working if show gif from local resources – source={require(‘../assets/my_gif.gif’)}
Alex if you are calling image from local resource Assets folder then you have to call like this source={{uri: ‘asset:/my_gif.gif’}} .
I’m using CameraRoll to get photos. GIFs are being shown as static image from assets url alongwith PNGs. But when I upload to server and render using Url, then its animating fine. Using react native version 0.58.4. Any reason for local GIFs not animating?
I’m using source={{ uri:” }} itself.
Thanks for asking this Deepak. I will check your query and reply you ASAP.