Performance is really bad even after the animation is finished.

[rickwillcox]

Code

<ConfettiCannon
          count={300}
          autoStartDelay={400}
          fallSpeed={3000}
          explosionSpeed={500}
          fadeOut
          origin={{ x: Dimensions.get('window').width / 2, y: 0 }}
        />

When I try to resize the window anytime during or after the animation it gets really laggy and the other components get all jittery. To solve this for now I remove the component after 5 seconds completely

 function Component() {
  const [showConfetti, setShowConfetti] = useState<boolean>(true);

  useEffect(() => {
    setTimeout(() => {
      setShowConfetti(false);
    }, 5000);
  }, []);

  return (
    <>
      // other stuff on the screen
      {showConfetti && (
        <ConfettiCannon
          count={300}
          autoStartDelay={400}
          fallSpeed={3000}
          explosionSpeed={500}
          fadeOut
          origin={{ x: Dimensions.get('window').width / 2, y: 0 }}
        />
      )}
    </>
  );
}

Anyone know a better way to get around this.

[fukemy]

this lib is bad, using https://github.com/cdvntr/react-native-confetti/ instead

[oliviercperrier]

@fukemy https://github.com/cdvntr/react-native-confetti/ is super laggy even with 100 confetti only. Any other suggestion?

[miteshdevg]

Code

<ConfettiCannon
          count={300}
          autoStartDelay={400}
          fallSpeed={3000}
          explosionSpeed={500}
          fadeOut
          origin={{ x: Dimensions.get('window').width / 2, y: 0 }}
        />

When I try to resize the window anytime during or after the animation it gets really laggy and the other components get all jittery. To solve this for now I remove the component after 5 seconds completely

function Component() {
 const [showConfetti, setShowConfetti] = useState<boolean>(true);

 useEffect(() => {
   setTimeout(() => {
     setShowConfetti(false);
   }, 5000);
 }, []);

 return (
   <>
     // other stuff on the screen
     {showConfetti && (
       <ConfettiCannon
         count={300}
         autoStartDelay={400}
         fallSpeed={3000}
         explosionSpeed={500}
         fadeOut
         origin={{ x: Dimensions.get('window').width / 2, y: 0 }}
       />
     )}
   </>
 );
}

Anyone know a better way to get around this.

please use

<ConfettiCannon count={130} explosionSpeed={250} origin={{ x: -10, y: -10 }} onAnimationEnd={() => setCelShow(false)} />

   `onAnimationEnd`

         propos