ImagesAsGif.js 1.4 KB
'use strict';

var React = require('react');
var ReactNative = require('react-native');
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';

var {
    Image,
} = ReactNative;

var TimerMixin = require('react-timer-mixin');

module.exports = createReactClass({

    propTypes: {
        images: PropTypes.array.isRequired,
        repeatCount: PropTypes.number,
        duration: PropTypes.number,
    },

    mixins: [TimerMixin],

    getInitialState: function() {
        return {
            imageIndex: 0,
        };
    },

    getDefaultProps() {
      return {
        repeatCount: 1000,
        duration: 100,
      }
    },

    componentDidMount: function() {
        this.repeatCount = this.props.repeatCount;
        this.intervalId = this.setInterval(()=>{
            var imageIndex = this.state.imageIndex+1;
            if (imageIndex >= this.props.images.length) {
                imageIndex = 0;
                if (this.repeatCount === 1) {
                    this.clearInterval(this.intervalId);
                    return;
                }
                this.repeatCount--;
            }
            this.setState({imageIndex:imageIndex})
        }, this.props.duration);
    },

    render: function() {
        return (
            <Image
                {...this.props}
                source={this.props.images[this.state.imageIndex]}
            />
        );
    }
});