cdvntr / react-native-confetti Goto Github PK

Hello. Thank you for this awesome component. Works great so far!

I was wondering if there is any way to know (programatically) when the confetti animation is over. Perusing the code, I don't see any callback for this. I need to know this in order to update app state at appropriate time. During the animation, I need the state of a component to say in a "completed" state but after the animation, it needs to be in its "reset" state.

(I'm willing to submit a PR for this.)

hello, any example to implement the readme's gif?
put the inside the or something?

thanks

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.

Can we achieve bottom to top animation and also continuous like canon?
Please add this feature also.

Currently, it's pulling the original 0.0.6 code from 10 months ago. Would be nice to be able to update new features via npm.

How can I trigger this view when I tap a button which takes me to this screen?

In reference to the example, it allows confetti to fall from top of the container (in which confetti component is defined) to the bottom of the screen. Is there any way to limit this fall to the bottom of the container in which confetti is defined?

I think that ideally, the confetti should show up on top, but it shows up behind everything else on a page including some buttons that take up some decent space. It's not quite as noticeable with text, but anything else makes it clear there's a problem.

I was having issues with using stopConfetti() from the docs, it simply didn't exist. Then I realised that the code implementing it doesn't yet exist in my local copy from NPM (0.0.4).

Would simple bump and publish solve this issue? I'd be happy to help, but not sure if I can.

Thanks for this package, as well as help with this!

That new setting the color stuff isn't in there by @Xaeonn