confettiView.js

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Animated
} from 'react-native';

import Confetti from "./confetti.js";

class ConfettiView extends Component {
  constructor(props) {
      super(props);
      this.state = {confettis: []};
      this.confettiIndex = 0;
      this.stopConfetti = false;
  }

  startConfetti() {
       let {confettis} = this.state;
       let {confettiCount, timeout} = this.props;
       this.stopConfetti = false;
       if(this.confettiIndex < confettiCount) {
         setTimeout(() => {
           if (this.stopConfetti) {
             return;
           } else {
             confettis.push({key: this.confettiIndex});
             this.confettiIndex++;
             this.setState({confettis});
             this.startConfetti();
           }
         }, timeout);
       }
  }

  removeConfetti(key) {
       let {confettis} = this.state;
       let {confettiCount} = this.props;
       let index = confettis.findIndex(confetti => {return confetti.key === key});
       confettis.splice(index, 1);
       this.setState({confettis});
       if(key === confettiCount - 1) {
         this.confettiIndex = 0;
       }
  }
  
  stopConfetti () 
  {
    this.stopConfetti = true;
  }
  
  render() {
       let {confettis} = this.state;
       let {...otherProps} = this.props
       return <View style={styles.container}>
         {confettis.map(confetti => {
             return <Confetti key={confetti.key} index={confetti.key} onComplete={this.removeConfetti.bind(this, confetti.key)} colors={this.props.colors} {...otherProps}/>
         })}
       </View>
  }
}

ConfettiView.defaultProps = {
   confettiCount: 100,
   timeout: 30
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0
  }
});

export default ConfettiView;