Feature request : yDelta prop
enguerranws opened this issue · comments
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.
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/