Gif not working in React Native iOS

Question

I'm Using react 15.2.1 and react-native 0.30.0

I checked out How do I display an animated gif in React Native? and followed the instructions.

<Image source={{ uri: 'http://i.giphy.com/l41YiEvBtjGKNlzby.gif'
       style={{ height: 250, width: 250 }} />

Also tried

<Image source={require('./path/to.gif')}
       style={{ height: 250, width: 250 }} />

But the gif isn't showing. If I switch out the link for an image it works fine.

I checked this working example https://rnplay.org/apps/739mzQ but can't test it with 0.30.0 so I'm wondering if something has changed since then.

did you resolve? Some Giphy images display for me and some don't — aginsburg, Jan 31 '17 at 23:10

score 1 · Answer 1 · answered Aug 19 '16 at 22:45

1

Maybe add gif to your project and use require function.

answered Aug 19 '16 at 22:45

Wojtek Szafraniec

541
3
7

here is the link to solve your problem http://stackoverflow.com/questions/35594783/how-do-i-display-an-animated-gif-in-react-native/40717686#40717686 – Venkatesh Somu Feb 23 '17 at 11:45

score 0 · Answer 2 · answered Jul 09 '19 at 17:06

please try this example


import React, {Component} from 'react';
import { StyleSheet,  View} from 'react-native';
const SplashGif = require('./images/Wallpaper.gif');

export default class App extends Component {
  render() {
    const { container, imageStyles } = styles;
    return (
      <View style={container}>
        <Image source={SplashGif} style={imageStyles} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  imageStyles: {
    resizeMode: 'stretch',
    width: '100%',
    height: '100%'
  }
});

score 0 · Answer 3 · edited Jul 16 '19 at 16:33

Use this code:

import React, {Component} from 'react';
import { StyleSheet, Image,Text, View} from 'react-native';
const Splash = require('./images/testGif.gif')

class SplashSrceen extends Component {

  render() {
    const { container, splashgif } = styles;
    return (
      <View style={container}>
        <Image source={Splash} style={splashgif} />
        <Text>or</Text>
        <Image source={{uri:'https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif'}}style={splashgif} />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  splashgif: {
    resizeMode: 'stretch',
    width: '100%',
    height: '50%'
  }
});

export default SplashSrceen ;

Android

To correct for this, we included the following libraries:

dependencies {
    implementation 'com.facebook.fresco:fresco:1.10.0'
    implementation 'com.facebook.fresco:animated-gif:1.10.0'
}

Gif not working in React Native iOS

3 Answers3