cdvntr / react-native-confetti

Raining confetti made with react native animations
MIT License
221 stars 55 forks source link

Feature request : yDelta prop #24

Open enguerranws opened 4 years ago

enguerranws commented 4 years ago

Hi,

I need to make this confetti animation go below the device viewport. Right now, the confettis stops at the bottom of the screen, and disappear.

I would do it with custom styles, but I can't get it work :/ Digging in the code, I found a value that we could use, in confetti.js:

componentDidMount() {
      let {duration, index} = this.props;
        Animated.timing(this._yAnimation, {
           duration: duration + this.randomIntValue(duration * .2, duration * -.2),
           toValue: windowHeight + 1.25, // <=== here
           useNativeDriver: true
        }).start(this.props.onAnimationComplete);
  }

Maybe we could change it to:

componentDidMount() {
      let {duration, yDelta} = this.props;
        Animated.timing(this._yAnimation, {
           duration: duration + this.randomIntValue(duration * .2, duration * -.2),
           toValue: windowHeight + yDelta,
           useNativeDriver: true
        }).start(this.props.onAnimationComplete);
  }

With the relevant defaultProps:

Confetti.defaultProps = {
    duration: 6000,
    colors: [
      "rgb(242.2, 102, 68.8)",
      "rgb(255, 198.9, 91.8)",
      "rgb(122.4, 198.9, 163.2)",
      "rgb(76.5, 193.8, 216.7)",
      "rgb(147.9, 99.4, 140.2)"
    ],
    size: 1,
    bsize: 1,
    yDelta: 1.25,
}

I'm not sure about the naming (yDelta is probably not the best param name). However I have a branch ready to push.

enguerranws commented 4 years ago

I'm not sure that repo is still maintained. However, I forked it so we can still work on it : https://github.com/enguerranws/react-native-confetti/