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 : ‘/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 : ‘/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 :
Also Read :
React Native Apply Auto Zoom on Background Image Example
React Native Change Progress bar Progress on ScrollView Scroll Dynamically iOS Android Example
React Native SectionList Component iOS Android Example Tutorial
Send WhatsApp Message From React Native App Example Tutorial
React Native AutoComplete Text Input Android iOS Example Tutorial
