CODEWITHSUNDEEP
iosimagereactjsreact-native
bsiddiqui
bsiddiqui

Reputation: 1926

Gif not working in React Native iOS

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.

Upvotes: 0

Views: 6617

Answers (3)

Kirtan Dudhat
Kirtan Dudhat

Reputation: 41

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

Upvotes: 0

Sagar Kachhadiya
Sagar Kachhadiya

Reputation: 1066

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%'
  }
});

Upvotes: 0

Wojtek Szafraniec
Wojtek Szafraniec

Reputation: 609

Maybe add gif to your project and use require function.

Upvotes: 1

Related Questions